@font-face{font-family:Familjen;src:url('assets/fonts/familjen.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#000;color:#fff}body{font-family:Familjen,Arial,sans-serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid #fff;outline-offset:7px}button:disabled{cursor:wait}button[hidden],[hidden]{display:none!important}.stage{position:relative;width:100%;height:100vh;height:100svh;min-height:0;overflow:hidden;isolation:isolate}.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.blackout{position:absolute;inset:0;background:#000;opacity:0;z-index:3;pointer-events:none}.opening{position:absolute;z-index:4;width:min(73vw,1050px);top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;align-items:center;transition:opacity .16s}.type-meta{width:100%;display:flex;justify-content:space-between;font:10px Arial,sans-serif;letter-spacing:.12em;margin:0 0 7px}.meta-index{opacity:.6}.lettering{width:100%;margin:0;font-weight:normal}.type-art{display:block;width:100%;overflow:visible}.word{transform-box:fill-box;transform-origin:center}.word-woogi{animation:place-serif 2.7s both}.word-design{animation:place-sans 2.7s both}.word-portfolio{animation:place-pixel 2.7s both}.guides{fill:none;stroke:#fff;stroke-width:.65;opacity:.24;animation:guide-in 2.7s both}.guides .dashed{stroke-dasharray:4 6}.type-selection{opacity:.62;animation:select-letter 2.7s both}.replace-o{opacity:0;animation:replace-o 2.7s both}.replace-eye{animation:replace-eye 2.7s both}.type-pointer{opacity:0;animation:pointer-in 2.7s both}.caret{animation:blink 1.1s steps(1) infinite}.type-toolbar{display:flex;gap:18px;justify-content:center;margin:13px 0 24px;font:9px Arial,sans-serif;letter-spacing:.08em}.type-toolbar span{opacity:.65}.type-toolbar span:last-child{opacity:1;border-bottom:1px solid #fff;padding-bottom:3px}.action,.delete-card{border-radius:21px;background:linear-gradient(145deg,rgba(240,246,255,calc(.13 + var(--hover,0)*.12)),rgba(152,171,190,.10));border:1px solid rgba(239,246,255,calc(.25 + var(--hover,0)*.4));box-shadow:0 8px 25px #0004,inset 0 1px 0 #ffffff40;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}.action{border-color:rgba(255,255,255,.3);box-shadow:none;filter:none;text-shadow:none;position:relative;isolation:isolate;overflow:hidden;min-width:208px;min-height:52px;padding:0 25px;display:inline-flex;align-items:center;justify-content:space-between;gap:38px;font-size:12px;letter-spacing:.08em;transition:color .18s,border-color .18s,transform .14s ease}.action::before{content:"";position:absolute;inset:0;z-index:0;background:#b9f5d2;border-radius:inherit;transform:scaleX(0);transform-origin:left center;transition:transform .34s cubic-bezier(.22,.7,.25,1)}.action>*{position:relative;z-index:1;box-shadow:none;filter:none;text-shadow:none}.action:focus-visible{color:#101713;border-color:#b9f5d2;outline:1px solid #b9f5d2;outline-offset:5px}.action:focus-visible::before,.action:not(:disabled):is(:active,.is-pressed)::before{transform:scaleX(1)}.action:not(:disabled):is(:active,.is-pressed){transform:scale(.94);color:#101713;border-color:#b9f5d2;transition-duration:70ms}.action:not(:disabled):is(:active,.is-pressed)::before{transition-duration:100ms}@media(hover:hover) and (pointer:fine){.action:not(:disabled):hover{color:#101713;border-color:#b9f5d2}.action:not(:disabled):hover::before{transform:scaleX(1)}}.action svg{width:30px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}.thought{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(73vw,1050px);text-align:center;padding:0;display:flex;flex-direction:column;align-items:center;background:transparent;container-type:inline-size;transition:opacity .14s}.thought-meta{width:100%;font:9px Arial,sans-serif;letter-spacing:.16em;margin:0 0 16px;display:flex;justify-content:space-between}.thought h2{width:100%;font-family:Arial,Helvetica,sans-serif;font-size:max(18px,6.222cqw);opacity:.85;font-weight:600;line-height:.96;letter-spacing:-.045em;margin:0 0 34px}.thought h2>.type-line,.thought h2>span{display:block;white-space:nowrap}.thought h2 .thought-serif{font-family:Georgia,serif;font-weight:normal;font-style:italic;letter-spacing:-.055em}.look{min-width:232px}.frame{position:absolute;inset:0;z-index:5;pointer-events:none;--edge:clamp(18px,2.421875vw,46.5px);--bottom:clamp(28px,4.1vw,79px);transition:opacity .6s}.corner{position:absolute;font-size:clamp(10px,.72917vw,14px);line-height:1.14286;letter-spacing:.03em;font-weight:400;text-shadow:0 1px 3px #0008}.top-left{left:var(--edge);top:var(--edge)}.top-right{right:var(--edge);top:var(--edge);text-align:right}.bottom-left{left:var(--edge);bottom:var(--bottom);letter-spacing:.06em}.bottom-right{right:var(--edge);bottom:var(--bottom);letter-spacing:.06em;text-align:right}.bottom-right>span:last-child{margin-left:12px;font-size:20px}.status{position:absolute;z-index:9;top:50%;left:50%;transform:translate(-50%,-50%);background:#0b0c0deb;border:1px solid #ffffff60;padding:22px 28px;text-align:center;font-size:13px;max-width:85%;width:330px}.status p{margin:0;line-height:1.5}.recovery{display:block;border:1px solid #fff;background:transparent;min-height:44px;padding:8px 20px;margin:16px auto 0;letter-spacing:.04em}.status:not(:has(.recovery:not([hidden])))::before{content:'';display:block;width:16px;height:16px;border:1px solid #fff4;border-top-color:#fff;border-radius:50%;margin:0 auto 13px;animation:spin .8s linear infinite}.selection-overlay{position:absolute;z-index:2;width:960px;height:540px;left:0;top:0;transform-origin:0 0;pointer-events:none;overflow:visible}.cue{--selection:#d5e5f2}.object-outline,.bounds{fill:none;stroke:var(--selection);stroke-width:1;vector-effect:non-scaling-stroke}.bounds{opacity:.65}.handles rect{fill:#111820;stroke:var(--selection);stroke-width:1;vector-effect:non-scaling-stroke}.selection-fragments rect{fill:var(--selection);shape-rendering:crispEdges;stroke:none}.object-label{fill:var(--selection);font:8px Arial;letter-spacing:1.2px}.cue[data-object="jacket"] .object-label{font-size:4px;letter-spacing:.65px}.selection-cursor path{fill:#171b20;stroke:#fff;stroke-width:1.15;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #0008)}.delete-card{position:absolute;z-index:2;left:0;top:0;width:80px;height:80px;opacity:0;pointer-events:none;transform-origin:center;display:grid;place-items:center}.delete-card svg{width:45px;height:45px;overflow:visible}.delete-card path{fill:none;stroke:#f9fbfff0;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{position:absolute;z-index:10;bottom:10%;width:100%;padding:20px;background:#000;text-align:center}.no-script a{color:inherit}html[data-state="starting"] .opening,html[data-state="intro"] .opening{opacity:0;pointer-events:none}html[data-state="ended"] .frame{opacity:0}
@keyframes place-serif{0%{opacity:0;transform:translate(-40px,-25px) rotate(-4deg)}25%{opacity:1;transform:translate(-12px,-7px) rotate(-2deg)}85%,100%{opacity:1;transform:none}}@keyframes place-sans{0%{opacity:0;transform:translate(34px,12px) rotate(3deg)}30%{opacity:1;transform:translate(14px,8px) rotate(1deg)}85%,100%{opacity:1;transform:none}}@keyframes place-pixel{0%,15%{opacity:0}35%{opacity:1;transform:translate(-12px,8px)}85%,100%{opacity:1;transform:translate(0,0)}}@keyframes select-letter{0%,23%{opacity:0}32%,73%{opacity:1}100%{opacity:.62}}@keyframes replace-o{0%,46%{opacity:1}47%,100%{opacity:0}}@keyframes replace-eye{0%,46%{opacity:0}47%,100%{opacity:1}}@keyframes pointer-in{0%,25%{opacity:0}34%,68%{opacity:1}82%,100%{opacity:0}}@keyframes guide-in{0%,16%{opacity:0}40%{opacity:.5}100%{opacity:.24}}@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes thought-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.opening{width:88vw}.type-meta{font-size:8px;letter-spacing:.08em}.type-toolbar{gap:11px;font-size:7px;margin:13px 0 26px}.action{min-height:52px;min-width:208px}.frame{--edge:20px;--bottom:max(30px,env(safe-area-inset-bottom))}.corner{font-size:10px;line-height:1.35}.bottom-left{width:49%;max-width:190px;line-height:1.7}.bottom-right{font-size:9px;max-width:42%;bottom:calc(var(--bottom) + 7px)}.bottom-right>span:last-child{margin-left:4px;font-size:15px}.thought{width:88vw}.thought-meta{font-size:8px;margin-bottom:14px}.selection-overlay .object-label{display:none}}
@media(max-height:550px) and (min-width:701px){.opening,.thought{width:min(59vw,560px);top:50%;transform:translate(-50%,-50%)}.type-toolbar{margin:4px 0 12px}.type-meta{font-size:8px}.action{min-height:44px}.thought h2{margin-bottom:12px}.thought-meta{margin-bottom:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.replace-o,.type-pointer{opacity:0}.replace-eye{opacity:1}.word{transform:none}.caret{opacity:1}}

/* One-shot editing animation uses reserved letter widths; all text stays shadow-free. */
.thought.is-leaving{opacity:0;pointer-events:none}.action:disabled{opacity:.34;cursor:default}.action:not(:disabled):hover,.action:focus-visible{--hover:1}.edit-scale{display:inline-block;position:relative;transform-origin:center}.edit-box{position:absolute;inset:0 -4px;border:1px solid #ffffffa6;pointer-events:none;font-style:normal}.edit-handle{position:absolute;width:4px;height:4px;border:1px solid #fff;background:#202a2e;transform:translate(-50%,-50%)}.edit-letter{position:relative;display:inline-block;white-space:pre;transform-origin:50% 78%}.edit-letter.has-caret::after{content:"";position:absolute;right:0;top:10%;height:82%;border-right:1px solid white;animation:blink .5s steps(1) infinite}.edit-cell.is-selected{background:#fffffff0;color:#111;border-radius:1px;outline:1px solid #ffffffa6}.edit-original{display:inline}.edit-random{position:absolute;inset:0;display:block;text-align:center}.thought[data-motion="complete"] .edit-box{opacity:0}.thought[data-motion="paused"] .has-caret::after{animation-play-state:paused}

/* Both scenes reserve the same centered type band and viewport CTA anchor. */
.stage{--hero-w:min(73vw,1050px,calc((100svh - 180px)/.455));--type-h:calc(var(--hero-w)*.455);--cta-gap:32px;--cta-height:52px;--cta-width:232px;--scene-h:calc(var(--type-h) + var(--cta-gap) + var(--cta-height))}.opening,.thought{width:var(--hero-w);height:var(--scene-h);padding:0;top:50%;left:50%;transform:translate(-50%,-50%)}.opening .lettering{height:var(--type-h)}.thought h2{height:var(--type-h);display:flex;flex-direction:column;justify-content:center;margin:0;flex-shrink:0}.cta-slot{position:absolute;z-index:6;left:50%;top:calc(50% + var(--type-h)/2 + var(--cta-gap)/2);transform:translate(-50%,-50%);display:grid}.cta-slot .action{grid-area:1/1;width:var(--cta-width);min-width:0;min-height:var(--cta-height);transition:color .18s,border-color .18s,transform .14s ease,opacity .14s}.action.is-leaving{opacity:0;pointer-events:none}@media(max-width:700px){.stage{--hero-w:min(88vw,calc((100svh - 180px)/.455));--cta-gap:28px;--cta-width:208px}}@media(max-height:550px) and (min-width:701px){.stage{--hero-w:min(59vw,560px,calc((100svh - 150px)/.455));--cta-gap:20px;--cta-height:44px}}

/* The original portfolio owns scrolling inside its isolated local document. */
html,body{overflow:hidden}.continuation{position:absolute;inset:0;z-index:7;background:#000}.portfolio-frame{display:block;width:100%;height:100%;border:0;background:#000}html:is([data-state="continuation-loading"],[data-state="continuation"],[data-state="continuation-error"]) :is(.intro-video,.selection-overlay,.delete-card,.blackout,.frame,.cta-slot){visibility:hidden}

/* Bounds and motion are controlled by local preview values. Both CTAs share one anchor. */
.thought h2{font-size:max(18px,calc(10.37cqw * var(--study-caption-scale,.6)));opacity:var(--study-caption-opacity,.85)}.action{border-color:rgb(255 255 255 / var(--study-button-outline,30%))}.stage{--cta-gap:var(--study-caption-button-gap,32px)}.cta-slot{top:clamp(36px,calc(50% + var(--type-h)/2 + var(--cta-gap)/2 + var(--study-button-y,0px)),calc(100svh - 36px))}@media(max-width:700px){.stage{--cta-gap:max(0px,calc(var(--study-caption-button-gap,32px) - 4px))}}
/* Smaller matched controls, with the caption protected from overlap on compact viewports. */
.stage{--cta-width:186px}.cta-slot{perspective:600px}.cta-slot .action{padding:0 18px;gap:12px;white-space:nowrap}.action svg{flex:none;stroke-width:1.9}.look.is-revealing:disabled{opacity:1;pointer-events:none;animation:look-reveal .26s cubic-bezier(.2,.7,.25,1) both}@keyframes look-reveal{from{opacity:0;transform:translate3d(0,8px,-20px) scale(.94)}to{opacity:1;transform:none}}@media(max-width:700px){.stage{--cta-width:166px}.cta-slot{top:clamp(36px,max(calc(50% + var(--type-h)/2 + var(--cta-gap)/2 + var(--study-button-y,0px)),calc(50% + 56px)),calc(100svh - 36px))}}@media(max-height:550px) and (min-width:701px){.cta-slot{top:clamp(30px,max(calc(50% + var(--type-h)/2 + var(--cta-gap)/2 + var(--study-button-y,0px)),calc(50% + 66px)),calc(100svh - 30px))}}
/* Approved pixels are kept in separate alpha-only high-resolution PNG layers. */
.opening .lettering{height:var(--type-h);display:grid;place-items:start center}.approved-type{position:relative;display:block;width:88.3%;aspect-ratio:1030/530;transform:translateY(clamp(-145px,-11vw,-44px))}.approved-type img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.approved-woogi{animation:approved-woogi-in .78s ease-out both}.approved-portfolio{animation:approved-portfolio-in .9s .36s ease-out both}.approved-design{animation:approved-design-in .75s 1.17s ease-out both}@keyframes approved-woogi-in{from{opacity:0;translate:0 3px}to{opacity:1;translate:0 0}}@keyframes approved-portfolio-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}@keyframes approved-design-in{from{opacity:0;translate:0 2px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
.thought h2{opacity:1;font-size:0;align-items:center}.approved-caption{position:relative;display:block;width:clamp(250px,calc(var(--hero-w)*var(--study-caption-scale,.38)),90vw);aspect-ratio:1230/520;opacity:var(--study-caption-opacity,.8)}.approved-caption .caption-line{position:absolute;inset:0;display:block;pointer-events:none;will-change:opacity,transform}.approved-caption img{display:block;width:100%;height:100%;object-fit:contain}.thought[data-motion="complete"] .caption-line{will-change:auto}@media(max-width:700px){.approved-caption{width:clamp(250px,calc(var(--hero-w)*var(--study-caption-scale,.38)),88vw)}}
/* Programmatic focus keeps the resting look calm; actual pointer/keyboard input restores the interactive mint fill. */
.look.is-auto-focused:is(:hover,:focus-visible){color:#fff;border-color:rgb(255 255 255 / var(--study-button-outline,20%));outline-color:#fff}.look.is-auto-focused:is(:hover,:focus-visible)::before{transform:scaleX(0)}
/* Shared row grid: the restored Georgia italic and Arial 600 are identical on both screens. */
.opening .lettering{display:flex;align-items:center;justify-content:center}.opening .mixed-type,.thought h2>.mixed-type{--mix-h:clamp(100px,calc(var(--hero-w)*.16),170px);display:grid;grid-template-rows:33% 20% 47%;align-items:center;justify-items:center;width:100%;height:var(--mix-h);opacity:var(--study-caption-opacity,.8);text-shadow:none}.mix-row{display:flex;justify-content:center;align-items:center;width:100%;white-space:nowrap;line-height:1}.mix-serif{font-family:Georgia,'Times New Roman',serif;font-size:calc(var(--mix-h)*.28);font-style:italic;font-weight:400;letter-spacing:-.055em}.mix-sans{font-family:Arial,Helvetica,sans-serif;font-size:calc(var(--mix-h)*.17);font-style:normal;font-weight:600;letter-spacing:-.045em}.mix-hand img{display:block;width:auto;height:calc(var(--mix-h)*.44);object-fit:contain}.opening .mix-serif{animation:approved-woogi-in .78s ease-out both}.opening .mix-hand{animation:approved-portfolio-in .9s .36s ease-out both}.opening .mix-sans{animation:approved-design-in .75s 1.17s ease-out both}
.opening .mixed-type,.thought h2>.mixed-type{--mix-base:clamp(100px,calc(var(--hero-w)*.16),170px);--mix-h:clamp(80px,calc(var(--mix-base)*var(--study-caption-scale,.38)*2.63158),300px);min-width:0}
.opening .mixed-type,.thought h2>.mixed-type{grid-template-columns:minmax(0,1fr)}
/* Keep a readable side margin for the longer uppercase serif line on narrow phones. */
.mix-serif{font-size:min(calc(var(--mix-h)*.28),calc(9.09vw - 2.91px))}

/* The existing portfolio declares scene-resting only after its white wipe finishes. */
.frame{z-index:8;opacity:0;visibility:hidden;color:#151515;transition:opacity .32s ease,visibility .32s;text-shadow:none}
.frame .corner{text-shadow:none}
html[data-state="continuation"][data-white-section="true"] .frame{opacity:1;visibility:visible}

/* Quiet first-screen editing study; the live text remains the actual final web text. */
.opening .mix-row{animation:none}
html[data-opening-motion="pending"] .opening .mix-row{opacity:0}
.opening-select{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;transform-origin:center;white-space:nowrap;will-change:transform;pointer-events:none}
.opening-select::before{content:"";position:absolute;inset:-5px;border:1px solid rgb(255 255 255 / .58);opacity:var(--selection-opacity,0);pointer-events:none}
.opening-handles{position:absolute;inset:-7px;opacity:var(--selection-opacity,0);pointer-events:none}
.opening-handles i{position:absolute;width:5px;height:5px;border:1px solid #dbe6e8;background:#17232a}
.opening-handles i:nth-child(1){left:0;top:0}.opening-handles i:nth-child(2){right:0;top:0}.opening-handles i:nth-child(3){left:0;bottom:0}.opening-handles i:nth-child(4){right:0;bottom:0}
.opening-ink{display:block;white-space:nowrap}
.opening .mix-hand .opening-select{justify-content:center}
.enter.is-intro-ready{animation:enter-ready .48s cubic-bezier(.22,.7,.25,1) backwards}
@keyframes enter-ready{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* The visible glass capsule contracts around the icon; its button hit area stays fixed. */
.cta-slot .action{height:var(--cta-height);padding:0 calc((var(--cta-height) - 24px)/2) 0 18px;background:transparent;border:0;border-radius:999px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.055em;transition:transform .14s ease,opacity .14s ease}
.cta-slot .action::before{inset:0 0 auto auto;width:100%;height:100%;border:1px solid rgb(255 255 255 / var(--study-button-outline,20%));border-radius:999px;background:linear-gradient(145deg,rgba(240,246,255,.13),rgba(152,171,190,.10));box-shadow:none;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);transform:none;transition:width .38s cubic-bezier(.22,.7,.25,1),border-color .18s ease,background-color .14s ease;pointer-events:none}
.cta-slot .action>span{opacity:1;transform:none;transition:opacity .18s ease,transform .28s ease}
.cta-slot .action svg{width:24px;height:17px;stroke-width:1.9}
.cta-slot .action:not(:disabled):hover,.cta-slot .action:focus-visible{color:#fff;border-color:transparent}
.cta-slot .action:focus-visible{outline:none}
.cta-slot .action:focus-visible::before{outline:2px solid #fff;outline-offset:4px;transform:none}
.cta-slot .action:not(:disabled):is(:active,.is-pressed){color:#101713;transform:scale(.94)}
.cta-slot .action:not(:disabled):is(:active,.is-pressed)::before{background:#b9f5d2;border-color:#b9f5d2;transform:none}
@media(hover:hover) and (pointer:fine){.cta-slot .action:not(:disabled):not(.is-auto-focused):hover::before{width:var(--cta-height);transform:none}.cta-slot .action:not(:disabled):not(.is-auto-focused):hover>span{opacity:0;transform:translateX(8px)}.cta-slot .action:focus-visible:hover::before{outline:none}}

/* The resting shell is the original 136px ENTER on both the first visit and a return. */
.entry-choice{--choice-open-width:358px;--choice-enter-width:186px;grid-area:1/1;position:relative;display:flex;align-items:center;width:136px;height:var(--cta-height);overflow:hidden;border:0;border-radius:999px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:width .42s cubic-bezier(.2,.72,.24,1);isolation:isolate}
.entry-choice.has-returned.is-expanded{width:var(--choice-open-width)}
.entry-choice.has-returned:is(.is-expanded,.is-collapsing){border:1px solid rgb(255 255 255 / var(--study-button-outline,20%));background:linear-gradient(145deg,rgba(240,246,255,.13),rgba(152,171,190,.10));backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.entry-choice:has(.action:focus-visible){outline:2px solid #fff;outline-offset:4px}
.cta-slot .entry-choice .action{position:relative;z-index:1;flex:none;grid-area:auto;height:100%;min-height:0;padding:0 18px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:width .42s cubic-bezier(.2,.72,.24,1),color .22s,transform .14s}
.cta-slot .entry-choice .enter{width:136px}
.cta-slot .entry-choice.is-expanded .enter{width:var(--choice-enter-width)}
.cta-slot .entry-choice .skip-intro::before{display:none}
.cta-slot .entry-choice:is(.is-expanded,.is-collapsing) .enter::before{display:none}
.cta-slot .entry-choice .enter:focus-visible::before{outline:none}
.entry-selection{position:absolute;z-index:0;left:4px;top:4px;width:calc(var(--choice-enter-width) - 8px);height:calc(100% - 8px);border-radius:999px;background:rgba(0,0,0,.20);box-shadow:none;opacity:0;pointer-events:none;transform:translateX(0);transition:transform .34s cubic-bezier(.2,.72,.24,1),width .34s cubic-bezier(.2,.72,.24,1),opacity .16s .13s}
.entry-choice.is-expanded .entry-selection{opacity:1}
.entry-choice.is-expanded.is-skip .entry-selection{width:calc(var(--choice-open-width) - var(--choice-enter-width) - 9px);transform:translateX(var(--choice-enter-width))}
.cta-slot .entry-choice.is-expanded .action{color:#fff}
.cta-slot .entry-choice.is-expanded:not(.is-skip) .enter,.cta-slot .entry-choice.is-expanded.is-skip .skip-intro{color:#fff}
.cta-slot .entry-choice.is-expanded .action:not(:disabled):hover>span{opacity:1;transform:translateY(-2px)}
.entry-divider{position:relative;z-index:1;flex:none;width:1px;height:21px;background:transparent;visibility:hidden;opacity:0;transition:opacity .2s .12s}
.entry-choice .skip-intro{width:calc(var(--choice-open-width) - var(--choice-enter-width) - 1px)!important;font-size:12px!important;letter-spacing:.045em!important}
.entry-choice .skip-intro svg{width:20px}
.entry-choice .skip-intro>span,.entry-choice .skip-intro svg{opacity:0;transform:translateX(-8px);transition:opacity .22s .12s,transform .3s .12s}
.entry-choice.is-expanded .entry-divider,.entry-choice.is-expanded .skip-intro>span,.entry-choice.is-expanded .skip-intro svg{opacity:1;transform:none}
@media(max-width:700px){.entry-choice{--choice-open-width:min(342px,calc(100vw - 28px));--choice-enter-width:166px}.entry-choice .skip-intro{font-size:11px!important;padding-inline:12px!important;gap:5px!important}.entry-choice .skip-intro svg{width:17px}}
@media(prefers-reduced-motion:reduce){.entry-choice,.entry-selection,.entry-divider,.entry-choice .action,.entry-choice .skip-intro>span,.entry-choice .skip-intro svg{transition:none!important}}

/* Fixed hit area; the visible shell and icon meet at the button center. */
.cta-slot .action::before{left:50%;right:auto;box-sizing:border-box;transform:translateX(-50%)}
.cta-slot .action svg{transform:translateX(0);transition:transform .38s cubic-bezier(.22,.7,.25,1)}
.cta-slot .action:focus-visible::before,.cta-slot .action:not(:disabled):is(:active,.is-pressed)::before{transform:translateX(-50%)}
@media(hover:hover) and (pointer:fine){.cta-slot .action:not(:disabled):not(.is-auto-focused):hover::before{transform:translateX(-50%)}.cta-slot .action:not(:disabled):not(.is-auto-focused):hover svg{transform:translateX(calc((var(--cta-height) - var(--cta-width))/2))}}

/* Narrower, centered capsules retain the centered icon-only hover gesture. */
.cta-slot .enter{--cta-width:136px}
.cta-slot .look{--cta-width:172px}
.cta-slot .action{justify-self:center;gap:12px;padding-left:17px;padding-right:14px}
.cta-slot .action>span{transform:translateY(-2px)}
@media(hover:hover) and (pointer:fine){.cta-slot .action:not(:disabled):not(.is-auto-focused):hover>span{transform:translate(8px,-2px)}}

/* Revised opening: masked letter lift, one restrained design selection, original PNG reveal. */
.opening .mix-serif .opening-ink{display:flex;align-items:baseline}
.woogi-letter-window{display:inline-block;overflow:hidden;line-height:1.16;vertical-align:bottom}
.woogi-letter{display:inline-block;will-change:transform,opacity}
.opening .mix-sans .opening-select{transform-origin:left top}
.design-edit-cursor{position:absolute;right:-13px;bottom:-18px;width:19px;height:25px;opacity:0;pointer-events:none}
.design-edit-cursor svg{display:block;width:19px;height:25px;overflow:visible;filter:drop-shadow(0 1px 1px #0008)}
.design-edit-cursor path{fill:#17212b;stroke:#fff;stroke-width:1.1;stroke-linejoin:round}
.enter.is-intro-ready{animation:enter-ready .42s cubic-bezier(.22,.7,.25,1) backwards}
@keyframes enter-ready{from{opacity:.22;transform:translateY(4px) scale(.95)}to{opacity:1;transform:none}}

/* V3: the intact, browser-shaped WOOGI word is revealed by SVG clip rectangles. */
.opening .mix-serif .opening-ink{display:block;line-height:1.12}
.opening .mix-serif{font-size:min(calc(var(--mix-h)*.3136),calc(10.18vw - 3.26px))}
.opening .mix-sans{font-size:calc(var(--mix-h)*.1904)}
.opening .mix-serif,.opening .mix-sans{position:relative;top:6px}
.portfolio-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
html[data-opening-motion="pending"] .intro-video{opacity:0}
html[data-opening-motion="playing"] .intro-video{animation:first-frame-in 1.18s cubic-bezier(.2,.58,.24,1) both}
html[data-opening-motion="ready"] .intro-video{opacity:1}
@keyframes first-frame-in{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.opening .mix-serif,.opening .mix-sans{top:4px}}

/* V4: a centered image aperture replaces the opacity fade. DESIGN grows about
   its own center, and the ENTER glass has no late backdrop-filter repaint. */
.opening .mix-sans .opening-select{transform-origin:center center}
html[data-opening-motion="pending"] .intro-video{opacity:1;clip-path:none}
html[data-opening-motion="playing"] .intro-video{opacity:1;animation:none}
html[data-opening-motion="ready"] .intro-video{opacity:1}
.brush-cover{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;will-change:opacity}
html[data-opening-motion="ready"] .brush-cover{opacity:0}
.enter::before{backdrop-filter:none;-webkit-backdrop-filter:none}

/* V5: one Illustrator-like edit inside the reserved, unchanged WOOGI word box. */
.opening .mix-serif .woogi-typo{position:absolute;top:0;visibility:hidden;white-space:nowrap;line-height:1.12;pointer-events:none}
.opening .mix-serif .woogi-typo.is-selected{color:#111;background:#fff;border-radius:1px;outline:1px solid #fff}
.opening .mix-serif .woogi-typing-caret{position:absolute;top:12%;height:76%;width:1.5px;background:#fff;pointer-events:none;animation:woogi-caret-blink .54s steps(1) infinite}
@keyframes woogi-caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Hover feedback moves the single inner selection, leaving the outer shell steady. */
@media(hover:hover) and (pointer:fine){.cta-slot .entry-choice.is-expanded .action:not(:disabled):hover>span{opacity:1;transform:translateY(-2px)}.cta-slot .entry-choice.is-expanded .action:not(:disabled):hover svg{transform:none}}

/* One-click study: the caption exit is painted by source-video time. */
.thought.is-single-flow{transition:none;pointer-events:none;will-change:opacity,transform}
html[data-intro-mode="single"] .look{display:none!important}

/* Match the opening portrait before the deferred video script computes its crop. */
@media(max-width:700px){.intro-video{object-position:44.5% 50%}}

/* Keep the opening logo and Enter control visually separate on phones. */
@media(max-width:700px){.cta-slot .entry-choice{translate:0 32px}}