/* The prototype's viewing layout, on the website's continuous blue light. */
.companions-page{max-width:1190px;margin:auto;padding:134px 36px 0;color:#eef5ff}
.companions-intro{text-align:center;margin-bottom:65px}.companions-intro h1{font-size:clamp(34px,4.8vw,60px);font-weight:500;letter-spacing:-2px;line-height:1.2;margin:18px 0}.companions-intro>p:not(.kicker){font-size:16px;line-height:1.8;color:#d0e0f5}
.playground,.capture-section{scroll-margin-top:30px}.preview-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:24px}.preview-heading h2{font-weight:500;font-size:30px;letter-spacing:-.7px;margin:0 0 10px}.preview-heading p:not(.kicker){font-size:13px;line-height:1.8;color:#d0e0f5}.preview-heading .kicker{margin-bottom:14px}
.companions-page button{font:inherit;transition:background .18s,color .18s,border-color .18s}.companions-page button:disabled{opacity:.5;cursor:default}.companions-page button:focus-visible,.companions-page textarea:focus-visible,.companions-page canvas:focus-visible{outline:2px solid #d8edff;outline-offset:4px}.quiet-button{padding:10px 14px;font-size:12px!important;color:#ecf4ff;background:#d8eaff0e;border:1px solid #c1dbff52;border-radius:9px;white-space:nowrap}.quiet-button:hover{background:#e0edff22}.primary-button{border-radius:30px;background:#e9f3ff;color:#172b55;padding:14px 21px;font-size:12px!important;font-weight:500!important;white-space:nowrap}.primary-button:hover{background:#fff}
.character-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 25px}.character-picker{display:flex;flex-wrap:wrap;gap:8px}.character-picker button{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:1px solid transparent;border-radius:10px;background:transparent;color:#e5f0ff;font-size:12px}.character-picker button:hover{background:#e5f0ff15}.character-picker button[aria-pressed=true]{background:#e9f3ff;color:#213954;border-color:#f6fbff}.character-picker canvas{width:35px;height:28px;image-rendering:pixelated;background:#8ba8bf;border-radius:5px}#character-note{font-size:11px;color:#d0e0f5;line-height:1.7}
.preview-workspace{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:32px;align-items:start}.companion-view{border:1px solid #bad7ff50;border-radius:18px;overflow:hidden;background:#c2ddff0b;box-shadow:0 18px 45px #07183018}.viewbar{padding:16px 19px;display:flex;justify-content:space-between;gap:14px;font-size:11px;color:#e5f0ff}.viewbar span:last-child{color:#c9dff4;font-size:10px}
.hero-stage{position:relative;aspect-ratio:180/88;min-height:290px;overflow:hidden;background:radial-gradient(ellipse at 17% 110%,#78bded 0,#307cbe 35%,transparent 72%),linear-gradient(130deg,#145996,#153b6a 90%)}.companion-scene{display:block;width:100%;height:auto}.hero-stage>.companion-scene{position:absolute;top:0;left:0}.hero-caption{position:absolute;left:24px;right:24px;bottom:22px;pointer-events:none}.hero-caption p{font-size:21px;font-weight:400;margin:0 0 7px}.hero-caption span{font-size:11px;color:#d5e7f8;line-height:1.7}.companion-scene canvas,#walker{cursor:pointer;image-rendering:pixelated}.actual{padding:0 18px 18px}.actual .viewbar{padding:17px 0 12px}.mini-screen{border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#2b78b4,#153f70)}.mini-screen svg{height:86px}
.preview-controls{padding-top:2px}.control-section+.control-section{margin-top:23px;padding-top:21px;border-top:1px solid #c5ddfc40}.control-section h3{font-size:13px;font-weight:500;margin:0 0 13px}.control-note{font-size:11px;color:#d0e0f5;line-height:1.8;margin:10px 0 0}.presence-options{display:flex;gap:4px;padding:3px;border:1px solid #c1dbff40;border-radius:10px;background:#bedcff0b}.presence-options button{flex:1;border-radius:7px;background:transparent;color:#d0e0f5;padding:9px 5px;font-size:12px}.presence-options button[aria-pressed=true]{background:#e9f3ff;color:#213954}.mood-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mood-picker button{display:flex;align-items:center;gap:8px;padding:10px 9px;border:1px solid #bad7ff40;border-radius:10px;background:#c1ddff0b;color:#e8f2ff;font-size:12px;text-align:left}.mood-picker button:hover{background:#c1ddff24;border-color:#bad7ff80}.mood-picker button[aria-pressed=true]{background:#e9f3ff;color:#213954;border-color:#f6fbff}.mood-picker button[data-pending=true]{border-style:dashed;border-color:#e6f3ff}.mood-picker canvas{width:38px;height:30px;border-radius:5px;background:#8ba8bf;image-rendering:pixelated}.codex-options{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px}.codex-options label{display:flex;align-items:center;gap:6px;font-size:10px;color:#dceaff}.codex-options input{accent-color:#b8d7ff;width:13px;height:13px;margin:0}.codex-options .quiet-button{padding:9px 10px;font-size:11px!important}.codex-controls small{display:block;color:#d0e0f5;font-size:10px;margin-top:10px}.experience-status{margin:16px 0 0;font-size:11px;color:#d0e0f5;min-height:20px;line-height:1.8}
.capture-section{margin-top:72px;padding-top:46px;border-top:1px solid #c2dcfa40}.capture-input-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:22px}.source-note{border:1px solid #fff8;background:#eaf3fff0;border-radius:11px;padding:14px 17px;color:#203951}.source-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;font-size:10px;color:#536a80}.source-heading button{border:0;padding:5px 8px;border-radius:5px;background:#d3e2f0;color:#294d6d;font-size:10px;cursor:grab;white-space:nowrap}.source-heading button:active{cursor:grabbing}.source-note textarea{color-scheme:light;background:transparent;color:#243b52;border:0;resize:vertical;min-height:42px;max-height:150px;width:100%;font:inherit;font-size:13px;line-height:1.8;padding:0}.source-note textarea:focus-visible{outline-color:#648bac}.saved-note{min-width:0}.saved-note>span{font-size:11px;color:#d0e0f5}.saved-note b{font:10px ui-monospace,monospace;display:inline-block;min-width:18px;padding:2px 5px;margin-left:6px;background:#e4f0ff1c;border-radius:4px}.saved-note p{font-size:13px;color:#edf5ff;line-height:1.8;margin-top:10px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.capture-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px;color:#d0e0f5;font-size:11px}.view-switch{display:flex;gap:3px;padding:3px;border-radius:9px;border:1px solid #c1dbff40;background:#bedcff0b}.view-switch button{background:transparent;border:0;padding:7px 11px;border-radius:6px;color:#d0e0f5;font-size:11px}.view-switch button[aria-pressed=true]{background:#e9f3ff;color:#213954}.capture-desktop{overflow:hidden;border-radius:13px;background:#242629;border:1px solid #bed5ed55}.capture-desktop svg{width:100%;height:auto;display:block;touch-action:pan-y}#walker{display:block;width:40px;height:32px}.capture-caption{display:flex;justify-content:space-between;align-items:baseline;gap:22px;padding:16px 2px 0;color:#d0e0f5;font-size:12px;line-height:1.8}.capture-caption>span{font-size:10px;flex-shrink:0}#capture-drag-ghost{position:fixed;left:0;top:-200px;padding:8px 12px;background:#f3cf87;color:#513e23;border:1px solid #e7ba68;border-radius:6px;font-size:12px;pointer-events:none}
.experience-download{text-align:center;padding:100px 0 70px}.experience-download h2{font-size:clamp(27px,4vw,43px);font-weight:500;margin-bottom:20px}.experience-download>p{font-size:14px;line-height:1.9;color:#d0e0f5}.experience-download .pill{margin:25px 0}.experience-download .experience-footnote{font-size:11px;max-width:720px;margin:0 auto 15px}.experience-footer{background:transparent;display:flex;justify-content:space-between;gap:18px;padding:26px 0 34px;border-top:1px solid #c2dcfa40;font-size:11px;color:#d0e0f5}.experience-footer a{color:#edf5ff}
@media(max-width:1000px){.preview-workspace{grid-template-columns:minmax(0,1fr) 265px;gap:23px}.character-bar{align-items:flex-start;flex-direction:column;gap:10px}.companions-page{padding:120px 25px 0}.hero-stage{min-height:290px}.hero-caption{left:20px;bottom:20px}.hero-caption p{font-size:19px}}
@media(max-width:760px){.preview-workspace{grid-template-columns:1fr;gap:25px}.preview-controls{display:grid;grid-template-columns:1fr 1.2fr;gap:20px}.control-section+.control-section{margin:0;padding:0;border:0}.codex-controls{grid-column:1/-1;border-top:1px solid #c2dcfa40!important;padding-top:20px!important}.codex-options{max-width:340px}.hero-stage{aspect-ratio:180/88;min-height:260px}.companions-intro{margin-bottom:44px}.preview-heading h2{font-size:26px}.capture-input-row{gap:17px}.source-heading{align-items:flex-start;gap:8px}.source-heading label{line-height:1.6}.capture-section{margin-top:50px;padding-top:34px}}
@media(max-width:500px){header{height:75px}.wordmark{font-size:16px}nav{gap:15px;font-size:10px}.companions-page{padding:107px 18px 0}.companions-intro h1{font-size:32px;letter-spacing:-1.2px}.companions-intro>p:not(.kicker){font-size:13px;max-width:280px;margin:auto}.companions-intro .kicker{font-size:9px}.preview-heading{gap:16px;align-items:flex-start}.preview-heading p:not(.kicker){font-size:12px}.preview-heading h2{font-size:25px}.preview-heading>.quiet-button{padding:8px 10px;font-size:10px!important;margin-top:4px}.character-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}.character-picker button{padding:6px;justify-content:center;border-color:#c1dbff25;font-size:11px;gap:6px}.character-picker canvas{width:35px;height:28px}.viewbar{padding:13px 15px;font-size:10px}.viewbar span:last-child{font-size:9px}.hero-stage{min-height:235px}.hero-caption{left:18px;bottom:20px}.hero-caption p{font-size:19px}.hero-caption span{font-size:10px}.actual{padding:0 13px 13px}.actual .viewbar{padding:14px 0 10px}.preview-controls{display:block}.control-section+.control-section{margin-top:22px}.control-section h3{font-size:12px}.mood-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.mood-picker button{padding:9px 5px;gap:5px;font-size:10px;justify-content:center}.mood-picker canvas{width:30px;height:24px}.presence-options{max-width:100%}.capture-section>.preview-heading{flex-direction:column;gap:18px}.capture-input-row{grid-template-columns:1fr;gap:15px}.saved-note p{font-size:12px;margin-top:6px}.capture-caption{flex-direction:column;gap:3px;font-size:11px}.source-note{padding:13px}.capture-toolbar{font-size:10px}.view-switch button{font-size:10px}.experience-download{padding:70px 0 50px}.experience-download>p{font-size:13px}.experience-footer{flex-wrap:wrap;font-size:10px;padding:24px 0;background:transparent}.experience-footer>span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.backdrop-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;color:#dceaff;font-size:11px;cursor:pointer}.backdrop-setting[hidden]{display:none}.backdrop-setting input{appearance:none;position:relative;width:30px;height:18px;margin:0;flex-shrink:0;border:1px solid #c1dbff65;border-radius:10px;background:#183452;cursor:pointer}.backdrop-setting input:before{content:"";position:absolute;left:3px;top:3px;width:10px;height:10px;border-radius:50%;background:#e9f3ff;transition:transform .18s}.backdrop-setting input:checked{background:#c6dfff;border-color:#c6dfff}.backdrop-setting input:checked:before{transform:translateX(12px);background:#213954}.backdrop-setting input:focus-visible{outline:2px solid #d8edff;outline-offset:4px}