/* An alternate underside. The original board geometry and pickup remain intact. */
.flip-enabled{perspective:1500px}
.flip-enabled>queen-scene,.flip-enabled>.fallback-landed-piece{backface-visibility:hidden;transform-origin:50% 50%;transition:transform 950ms cubic-bezier(.22,.75,.18,1),opacity 300ms}
.flip-enabled.is-flipped>queen-scene,.flip-enabled.is-flipped>.fallback-landed-piece{transform:rotateX(180deg)!important;pointer-events:none;opacity:0}
.board-info{position:absolute;right:12%;bottom:0;z-index:8;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;background:transparent;color:var(--ink);font:italic 21px/1 Georgia,serif;cursor:pointer;opacity:.65;pointer-events:auto;transition:opacity .2s,background .2s}
.board-info:hover{opacity:1;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.board-info[hidden]{display:none}
.board-info:focus-visible,.board-return:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.board-story-back{position:absolute;inset:10% 13% 12%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;transform:rotateX(-180deg);transform-origin:50% 50%;backface-visibility:hidden;opacity:0;pointer-events:none;transition:transform 950ms cubic-bezier(.22,.75,.18,1),opacity 300ms;background:#4b3225;color:#f4edda;box-shadow:0 12px 0 #35251d,0 30px 40px -25px #2b201c45;border-radius:2px}
.is-flipped .board-story-back{transform:rotateX(0deg);opacity:1;pointer-events:auto}
.board-story-content{width:100%;max-width:650px;padding:clamp(20px,4vw,60px);box-sizing:border-box}
.board-story-eyebrow{font:300 11px/1.3 'ABC Oracle',sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin:0 0 20px}
.board-story-back h2{font-family:'FAIRE Octave Trial Variable';font-weight:300;font-size:clamp(27px,3.2vw,48px);line-height:1;letter-spacing:0;text-transform:uppercase;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1;margin:0 0 22px}
.board-story-copy{font:300 clamp(15px,1.3vw,20px)/1.5 'ABC Oracle',sans-serif;margin:0;max-width:48ch}
.board-return{font:300 13px/1.4 'ABC Oracle',sans-serif;color:inherit;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 4px;margin-top:28px;cursor:pointer;opacity:.75}
.flip-enabled.is-flipped .piece-prompt{opacity:0!important}
[data-edition=glass] .board-story-back{background:linear-gradient(135deg,#edf3f2e8,#c9dbdbe8);color:#263c42;box-shadow:0 10px 0 #a8bfc4,0 28px 40px -26px #20363d55;backdrop-filter:blur(16px)}
[data-edition=sketch] .board-story-back{background:#f4f1e9;color:#292b2b;box-shadow:0 10px 0 #b7b5ae,0 28px 40px -26px #2225;border:1px solid #292b2b}
[data-edition=art] .board-story-back{background:#b64329;color:#fff1d5;box-shadow:0 10px 0 #7f2d23,0 28px 40px -26px #65281b55}
@media(max-width:679px){.board-story-back{inset:5% 5% 14%}.board-info{right:6%}.board-story-content{padding:24px}.board-story-back h2{font-size:30px}.board-story-copy{font-size:16px}}
@media(max-height:500px){.board-story-back{inset:0 7% 15%;overflow:auto}.board-story-content{padding:16px 28px;max-width:760px}.board-story-eyebrow{display:none}.board-story-back h2{font-size:26px;margin-bottom:10px}.board-story-copy{font-size:14px;max-width:70ch}.board-return{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.flip-enabled>queen-scene,.flip-enabled>.fallback-landed-piece,.board-story-back{transition:opacity .15s;transform:none!important}.board-story-back{visibility:hidden}.is-flipped .board-story-back{visibility:visible}}
/* The label and information control share one quiet line beneath the prompt. */
.octave-home .flip-enabled .piece-prompt{bottom:64px}
.board-label-row{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;z-index:8;pointer-events:auto}
.board-label-row[hidden]{display:none}
.board-label-row .board-info{position:static;width:38px;height:38px;flex:none}
.board-pill{border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:999px;padding:10px 20px;color:var(--ink);font:300 clamp(14px,1.15vw,18px)/1.3 'ABC Oracle',sans-serif;background:color-mix(in srgb,var(--ink) 3%,transparent)}
/* WebGL edition: no card, CSS flip or surrogate backing. The story is ink on the mesh. */
.has-3d-back>queen-scene,.has-3d-back.is-flipped>queen-scene{transform:none!important;opacity:1!important;transition:none!important}
.has-3d-back .board-story-back{position:absolute;inset:auto;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0;box-shadow:none;background:none;transform:none!important}
.has-3d-back .board-return{display:none}
.has-3d-back.is-flipped .board-label-row .board-info{opacity:1;background:color-mix(in srgb,var(--ink) 8%,transparent)}
@media(max-width:400px){.board-pill{padding:10px 15px}.board-label-row{gap:8px}}
/* Optical controls: the edge bends the backdrop, while the type stays sharp. */
.octave-home .flip-enabled .piece-prompt{top:var(--prompt-y,auto);bottom:auto;line-height:20px}
.board-label-row{bottom:auto;gap:12px;align-items:center}
.board-pill,.board-label-row .board-info{position:relative;isolation:isolate;box-sizing:border-box;min-height:44px;border:1px solid rgba(255,255,255,.65);background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,.12) 45%,rgba(255,255,255,.24));box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 1px #ffffff45,0 3px 12px #192e3b0a;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);color:#202c33;opacity:1}
.board-pill{padding:12px 24px;font-size:15px;line-height:20px;text-align:center}
.board-label-row .board-info{width:44px;height:44px;font-size:21px;cursor:pointer}
.board-pill::before,.board-label-row .board-info::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;border:5px solid transparent;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
@supports(backdrop-filter:url(#board-pill-lens)){.board-pill::before,.board-label-row .board-info::before{backdrop-filter:url(#board-pill-lens) blur(1px)}}
.board-label-row .board-info:hover{background-color:#ffffff45;box-shadow:inset 0 1px 0 #fff,0 4px 15px #192e3b12}
.board-story-back{inset:8% 14% 18%}
.board-story-content{padding:clamp(28px,5vw,68px);max-width:700px}
.board-story-back h2{margin-bottom:28px}
.board-story-copy{line-height:1.6}
[data-edition=art] .board-story-back{background:#1d4e89;color:#fff9ec;box-shadow:0 10px 0 #173b66,0 28px 40px -26px #173b6655}
[data-edition=glass] .board-story-back{background:#e9eef0;color:#18252d}
@media(max-width:679px){.board-story-back{inset:4% 5% 20%}.board-story-content{padding:26px}.board-label-row{gap:10px}.board-pill{padding-inline:20px;font-size:14px}}
@media(prefers-reduced-transparency:reduce){.board-pill,.board-label-row .board-info{background:#f3f4f2;backdrop-filter:none;-webkit-backdrop-filter:none}.board-pill::before,.board-label-row .board-info::before{display:none}}
.board-label-row .board-info{inset:auto;flex:0 0 44px}
/* Restore the first study's quieter editorial type proportions. */
.board-story-content{max-width:650px;padding:clamp(20px,4vw,60px)}
.board-story-back h2{font-size:clamp(27px,3.2vw,48px);margin-bottom:22px}
.board-story-copy{font-size:clamp(15px,1.3vw,20px);line-height:1.5}
.board-story-eyebrow{margin-bottom:20px}
[data-edition=wood] .board-story-back{background:repeating-linear-gradient(2deg,#c7a574 0,#d1b285 3px,#cfad7f 5px,#c4a170 8px);color:#29190f}
[data-edition=glass] .board-story-back{background:linear-gradient(130deg,#eef5f5,#cbdcde 48%,#e1edee);color:#243940}
@media(max-width:679px){.board-story-back h2{font-size:30px}.board-story-copy{font-size:16px}.board-story-content{padding:26px}}
@media(max-height:500px){.board-story-back h2{font-size:26px;margin-bottom:10px}.board-story-copy{font-size:14px}.board-story-content{padding:16px 28px;max-width:760px}}
/* Keep the non-WebGL piece present too, with the same lift-and-return story. */
.flip-enabled.is-fallback>.fallback-landed-piece{z-index:6;backface-visibility:visible;transition:transform 1400ms cubic-bezier(.22,.61,.2,1),opacity .3s}
.flip-enabled.is-fallback.is-flipped>.fallback-landed-piece{opacity:1!important;transform:translate(min(27vw,310px),-65px) rotate(-7deg)!important;pointer-events:none}
.flip-enabled.is-fallback>queen-scene,.flip-enabled.is-fallback .board-story-back{transition:transform 1400ms cubic-bezier(.22,.61,.2,1),opacity 650ms ease}
@media(prefers-reduced-motion:reduce){.flip-enabled.is-fallback>.fallback-landed-piece,.flip-enabled.is-fallback>queen-scene,.flip-enabled.is-fallback .board-story-back{transition:none}}
/* Exact original Octave glyphs, with the site's feature set enabled for Canvas. */
@font-face{font-family:'Octave Board Light';src:url('./fonts/octave-board-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:block}
/* The fallback rotates the piece in place with the board, never beside it. */
.flip-enabled.is-fallback>.fallback-landed-piece{transform-origin:50% 89.5%;transition:transform 1400ms cubic-bezier(.22,.61,.2,1)}
.flip-enabled.is-fallback.is-flipped>.fallback-landed-piece{transform:rotateX(180deg)!important;opacity:1!important;z-index:0;pointer-events:none}
[data-edition=wood] .board-story-back{background:repeating-linear-gradient(2deg,#4a2c17 0,#482a16 3px,#412410 5px,#4a2c17 8px);color:#f9e7c5}

/* Reserve a control lane, so short viewports never push labels over the mesh. */
.octave-home .board-stage.flip-enabled{--control-space:116px;--pill-tint:154,112,72;--pill-ink:#49301e}
.octave-home .board-stage.flip-enabled>queen-scene{bottom:var(--control-space)!important;height:auto}
[data-edition=glass] .board-stage.flip-enabled{--pill-tint:107,160,197;--pill-ink:#24475d}
[data-edition=sketch] .board-stage.flip-enabled{--pill-tint:153,149,137;--pill-ink:#414039}
[data-edition=art] .board-stage.flip-enabled{--pill-tint:72,112,172;--pill-ink:#233e68}
.board-label-row{max-width:calc(100% - 32px)}
.board-pill,.board-label-row .board-info{
 color:var(--pill-ink);border-color:rgba(var(--pill-tint),.32);
 background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,.08) 48%,rgba(255,255,255,.28)),rgba(var(--pill-tint),.21);
 transition:background-color .45s,color .45s,border-color .45s,box-shadow .2s;
}
.has-3d-back.is-flipped .board-label-row .board-info{background-color:rgba(var(--pill-tint),.3)}
.board-label-row .board-info:hover{background-color:rgba(var(--pill-tint),.35)}
.octave-home .flip-enabled.is-fallback .board-story-back{bottom:calc(var(--control-space) + 12px)}
.octave-home .flip-enabled.is-fallback .board-story-content{max-height:100%;overflow:auto;overscroll-behavior:contain}
@media(max-height:500px){.octave-home .board-stage.flip-enabled{--control-space:100px}.board-pill{padding:10px 18px}}
@media(prefers-reduced-transparency:reduce){.board-pill,.board-label-row .board-info{background:color-mix(in srgb,rgb(var(--pill-tint)) 22%,#fff)}}
@media(prefers-reduced-motion:reduce){.board-pill,.board-label-row .board-info{transition:none}}

/* A shorter editorial journey, scoped to this study. */
@font-face{font-family:'Oracle Regular';src:url('./fonts/abc-oracle-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
.flip-study-page .hero .copy-footer[hidden]{display:none}
.octave-home.flip-study-page .landing-section{margin-top:clamp(8px,2svh,24px)}
.flip-study-page #home-work{padding-top:clamp(48px,10svh,120px)}
.flip-study-page #home-work #projects .case-role{font-family:'Oracle Regular',sans-serif;font-weight:400}
.flip-study-page .career-position>span{display:block;margin-top:8px;font-family:'ABC Oracle',sans-serif;font-size:16px;font-weight:300;line-height:1.4;text-transform:none;letter-spacing:0;font-feature-settings:normal}
.flip-study-page .board-label-row{gap:6px}
.flip-study-page .board-label-row .board-info{transition:opacity .25s ease,transform .3s ease,background-color .3s}
@media(hover:hover) and (pointer:fine){
 .flip-study-page .board-label-row .board-info{opacity:0;transform:translateX(-6px) scale(.88);pointer-events:none}
 .flip-study-page .board-label-row:hover .board-info,.flip-study-page .board-label-row:focus-within .board-info,.flip-study-page .is-flipped .board-info{opacity:1;transform:none;pointer-events:auto}
}
@media(max-width:640px){.flip-study-page .career-position>span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.flip-study-page .board-label-row .board-info{transition:none}}

/* The pill is centred alone, then yields half the control width to the i. */
.flip-study-page .board-pill{transition:transform .46s cubic-bezier(.22,.61,.36,1),background-color .45s,color .45s,border-color .45s}
@media(hover:hover) and (pointer:fine){
 .flip-study-page .board-label-row .board-pill{transform:translateX(25px)}
 .flip-study-page .board-label-row:hover .board-pill,.flip-study-page .board-label-row:focus-within .board-pill,.flip-study-page .is-flipped .board-pill{transform:translateX(0)}
 .flip-study-page .board-label-row .board-info{transition:opacity .3s ease,transform .46s cubic-bezier(.22,.61,.36,1),background-color .3s}
}
@media(prefers-reduced-motion:reduce){.flip-study-page .board-pill,.flip-study-page .board-label-row .board-info{transition:none}}

/* Keep guidance present through pickup, landing and a change of edition. */
.flip-study-page .flip-enabled.is-flipped .piece-prompt.is-visible{opacity:.6!important}
.flip-study-page .board-pill{min-width:170px}
.flip-study-page .board-label-row .board-info:disabled{cursor:default}
.flip-study-page,.flip-study-page .logo-wall,.flip-study-page #home-work,.flip-study-page .travelling-name{transition-duration:.8s!important}
@media(prefers-reduced-motion:reduce){.flip-study-page,.flip-study-page .logo-wall,.flip-study-page #home-work,.flip-study-page .travelling-name{transition:none!important}}

/* One inset and one optical envelope, regardless of tile span. */
.flip-study-page #clients .client-logo{padding:clamp(10px,2vw,28px);box-sizing:border-box}
.flip-study-page #clients .client-logo img{width:100%;height:100%;max-width:200px;max-height:96px;object-fit:contain;object-position:center}
@media(max-width:640px){.flip-study-page #clients .client-logo{padding:8px}.flip-study-page #clients .client-logo img{max-width:130px;max-height:65px}}

.flip-study-page #clients .logo-frame{display:block;position:relative;overflow:hidden;flex:none;width:min(100%,200px,calc(96px * var(--logo-ratio)));aspect-ratio:var(--logo-ratio)}
.flip-study-page #clients .logo-frame img{position:absolute;max-width:none;max-height:none;object-fit:fill}
@media(max-width:640px){.flip-study-page #clients .logo-frame{width:min(100%,130px,calc(65px * var(--logo-ratio)))}}
/* A single liquid surface moves between four plain-language style choices. */
.flip-study-page .board-label-row.liquid-selector{width:min(500px,calc(100% - 24px));max-width:calc(100% - 24px);height:50px;display:block;isolation:isolate;--liquid-colour:182,94,27;--liquid-second:239,173,58}
[data-edition=glass] .flip-study-page .liquid-selector{--liquid-colour:21,133,229;--liquid-second:49,207,229}
[data-edition=sketch] .flip-study-page .liquid-selector{--liquid-colour:105,118,140;--liquid-second:162,168,187}
[data-edition=art] .flip-study-page .liquid-selector{--liquid-colour:207,43,80;--liquid-second:64,107,222}
.board-style-options{display:flex;align-items:center;width:100%;height:50px;gap:0}
.board-style-option{flex:1;min-width:0;height:50px;padding:0 4px;border:0;background:none;color:var(--ink);font:300 14px/1 'ABC Oracle',sans-serif;cursor:pointer;white-space:nowrap;transition:flex-grow .46s cubic-bezier(.22,.61,.36,1),opacity .3s}
.board-style-option[aria-checked=true]{flex:2.8;color:transparent}
.board-style-option:focus-visible{outline:2px solid var(--pill-ink);outline-offset:4px;border-radius:25px}
.board-liquid-shell{position:absolute;top:0;height:50px;transition:left .46s cubic-bezier(.22,.61,.36,1),width .46s cubic-bezier(.22,.61,.36,1);pointer-events:none;z-index:2}
.board-liquid-shell::before{content:'';position:absolute;inset:9px 9px 0;border-radius:28px;background:radial-gradient(ellipse at 25% 90%,rgba(var(--liquid-second),.7),transparent 70%),linear-gradient(115deg,rgba(var(--liquid-colour),.58),rgba(var(--liquid-second),.38));filter:blur(8px);transform:translateY(6px);opacity:.8;transition:background .8s;pointer-events:none}
.board-liquid-skin{position:absolute;inset:0;width:100%;height:50px;overflow:visible;filter:drop-shadow(0 6px 8px rgba(var(--liquid-colour),.18))}
.liquid-tint{fill:rgba(var(--liquid-colour),.24);transition:fill .8s}
.flip-study-page .liquid-selector .board-pill{position:absolute;inset:0 auto auto 0;height:50px;min-width:0;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none!important;pointer-events:auto;user-select:none;white-space:nowrap;color:var(--ink);font-size:14px;transition:none}
.flip-study-page .liquid-selector .board-pill::before{display:none}
.flip-study-page .liquid-selector .board-info{position:absolute;top:3px;bottom:auto;margin:0;width:44px;height:44px;background:transparent!important;border:0;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;transform:scale(calc(.7 + var(--info-reveal,0) * .3))!important;opacity:var(--info-reveal,0)!important;z-index:3;color:var(--ink);transition:left .46s cubic-bezier(.22,.61,.36,1)}
.flip-study-page .liquid-selector .board-info::before{display:none}
.liquid-selector.is-dragging .board-liquid-shell,.flip-study-page .liquid-selector.is-dragging .board-info{transition:none}
.liquid-selector.is-dragging .board-pill{cursor:grabbing!important}
@media(max-width:500px){.board-style-option{font-size:12px}.flip-study-page .liquid-selector .board-pill{font-size:12px}}
@media(prefers-reduced-motion:reduce){.board-style-option,.board-liquid-shell,.flip-study-page .liquid-selector .board-info,.liquid-tint{transition:none}}
@media(prefers-reduced-transparency:reduce){.liquid-tint{fill:var(--paper)}.board-liquid-shell::before{opacity:.25}}

.flip-study-page .board-label-row.liquid-selector[hidden]{display:none!important}

/* Saturated glass, with a real lift and a detached information bubble. */
.flip-study-page .liquid-selector{--liquid-colour:166,68,8;--liquid-second:255,144,0}
[data-edition=glass] .flip-study-page .liquid-selector{--liquid-colour:0,113,239;--liquid-second:0,205,255}
[data-edition=art] .flip-study-page .liquid-selector{--liquid-colour:220,13,66;--liquid-second:90,42,245}
[data-edition=sketch] .flip-study-page .liquid-selector{--liquid-colour:65,86,123;--liquid-second:117,145,177}
.liquid-tint{fill:rgba(var(--liquid-colour),.68)}
.board-liquid-shell::before{inset:15px 8px -3px;background:radial-gradient(ellipse at 25% 90%,rgb(var(--liquid-second)),transparent 68%),linear-gradient(115deg,rgba(var(--liquid-colour),.95),rgba(var(--liquid-second),.85));filter:blur(5px);opacity:1;transform:translateY(7px)}
.board-liquid-shell{transition:left .46s cubic-bezier(.22,.61,.36,1),width .46s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:center}
.flip-study-page .liquid-selector .board-pill,.flip-study-page .liquid-selector .board-info{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.liquid-selector.is-dragging .board-liquid-shell{z-index:5;filter:drop-shadow(0 14px 9px rgba(var(--liquid-colour),.3))}
.liquid-selector.is-dragging .board-style-option[aria-checked=true]{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.board-liquid-shell{transition:none}}
.board-liquid-shell::before{right:calc(8px + var(--info-reveal,0) * 54px)}

/* Refraction belongs inside the lens. No cast shadow or halo. */
.flip-study-page .liquid-selector{--liquid-rgb:rgb(var(--liquid-colour));--liquid-accent:rgb(var(--liquid-second))}
.board-liquid-shell::before,.board-liquid-shell::after{display:none!important}
.board-liquid-shell,.liquid-selector.is-dragging .board-liquid-shell,.board-liquid-skin{filter:none!important;box-shadow:none!important;transition:none!important}
.liquid-tint{fill:url(#liquid-colour-field)}
.flip-study-page .liquid-selector .board-pill{color:var(--ink);text-shadow:none}
.flip-study-page .liquid-selector .board-info{display:flex;align-items:center;justify-content:center;padding:0;line-height:1;text-indent:0;color:var(--ink);text-shadow:none;transition:none!important;transform:none!important}

/* Figma 91:9 / 91:38: a clear lens over stationary Octave labels. */
.flip-study-page .board-label-row.liquid-selector{width:min(640px,calc(100% - 24px));height:70px}
.board-style-options{height:70px}
.board-style-option{height:70px;font-family:'FAIRE Octave Trial Variable',serif;font-weight:300;font-variation-settings:'wght' 300,'opsz' 12;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1;text-transform:uppercase;font-size:21.252px;line-height:1;letter-spacing:0;color:var(--pill-ink);box-sizing:border-box}
.board-style-option[aria-checked=true]{flex:2.8;color:var(--pill-ink)}
.board-liquid-shell,.board-liquid-skin{height:70px}
.board-liquid-skin{opacity:.8}
.liquid-tint{fill:rgba(255,255,255,.1)}
.liquid-shine{fill:rgba(255,255,255,.025);stroke-width:.65}
.flip-study-page .liquid-selector .board-pill{height:70px;color:transparent!important;text-shadow:none;border-radius:70px;backdrop-filter:blur(1.15px) saturate(1.12);-webkit-backdrop-filter:blur(1.15px) saturate(1.12)}
.flip-study-page .liquid-selector .board-info{top:13px;color:var(--pill-ink);border-radius:50%;backdrop-filter:blur(1.15px);-webkit-backdrop-filter:blur(1.15px)}
.liquid-selector.is-dragging .board-style-option[aria-checked=true]{color:var(--pill-ink)}
@media(max-width:640px){
 .flip-study-page .board-label-row.liquid-selector,.board-style-options,.board-style-option,.board-liquid-shell,.board-liquid-skin,.flip-study-page .liquid-selector .board-pill{height:56px}
 .board-style-option{font-size:clamp(13px,3.2vw,20px)}
 .flip-study-page .liquid-selector .board-info{top:6px}
}
.flip-study-page .liquid-selector .board-pill{border:1px solid rgba(255,255,255,.72);box-sizing:border-box;backdrop-filter:none;-webkit-backdrop-filter:none}
.flip-study-page .liquid-selector.is-dragging .board-pill{backdrop-filter:blur(1.15px) saturate(1.12);-webkit-backdrop-filter:blur(1.15px) saturate(1.12)}
.flip-study-page .liquid-selector .board-info{border:1px solid rgba(255,255,255,.65)}
.flip-study-page .liquid-selector .board-info{border:0}
.board-liquid-skin{opacity:1}
@media(max-width:480px){.board-style-option[aria-checked=true]{flex:4}.board-style-option{font-size:13px}}

/* A smaller lifted lens bends the stationary lettering beneath it. */
.pill-word-lens{position:absolute;pointer-events:none;overflow:hidden;border-radius:999px;z-index:2;opacity:0;transition:opacity .16s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);background:rgba(255,255,255,.06)}
.liquid-selector.is-dragging .pill-word-lens{opacity:1}
.pill-word-lens .board-style-options{position:absolute;left:0;top:0;filter:url(#pill-text-refraction);pointer-events:none}
.pill-word-lens .board-style-option{transition:none!important}
.flip-study-page .liquid-selector.is-dragging .board-pill{backdrop-filter:none;-webkit-backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.pill-word-lens{transition:none}}

/* Compact selector from the revised Figma study. */
.flip-study-page .board-label-row.liquid-selector{width:min(560px,calc(100% - 24px));height:44px}
.board-style-options,.board-style-option,.board-liquid-shell,.board-liquid-skin,.flip-study-page .liquid-selector .board-pill{height:44px}
.board-style-option{font-size:18px;flex:1;transition:font-size .35s ease,flex-grow .46s cubic-bezier(.22,.61,.36,1)}
.board-style-option[aria-checked=true]{flex:1.5;font-size:24px}
.board-selector-caption{position:absolute;bottom:calc(100% + 16px);left:0;width:100%;text-align:center;font-family:'FAIRE Octave Trial Variable',serif;font-weight:300;font-size:15px;line-height:1;font-feature-settings:'dlig' 1,'ss01' 1,'ss06' 1,'ss11' 1,'ss14' 1;text-transform:uppercase;color:var(--pill-ink);pointer-events:none}
.flip-study-page .liquid-selector .board-info{top:0}
.pill-word-lens{filter:url(#pill-text-refraction);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);background:rgba(255,255,255,.1)}
.pill-word-lens .board-style-options{filter:none}
.pill-word-lens .board-style-option{text-shadow:.35px 0 rgba(207,74,42,.28),-.35px 0 rgba(41,104,174,.28)}
@media(max-width:480px){.board-style-option{font-size:13px}.board-style-option[aria-checked=true]{flex:1.8;font-size:16px}.board-selector-caption{font-size:13px}}

/* One instruction, a fixed rail and a separate circular information action. */
.flip-study-page .board-label-row.liquid-selector{width:min(288px,calc(100% - 32px));height:30px}
.board-style-options,.board-style-option,.board-liquid-shell,.board-liquid-skin,.flip-study-page .liquid-selector .board-pill{height:30px;min-height:0}
.board-style-option,.board-style-option[aria-checked=true]{flex:1!important;padding:0!important;font-size:12px;transition:none}
.board-style-option span{display:inline-block;transform:none;opacity:.78;transition:opacity .45s ease}
.board-style-option[aria-checked=true] span{transform:none;opacity:1}
.flip-study-page .liquid-selector .board-pill{border:0!important;box-shadow:none!important}
.flip-study-page .liquid-selector .board-info{position:absolute!important;inset:calc(100% + 6px) auto auto 50%!important;transform:translateX(-50%)!important;display:flex;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;aspect-ratio:1;opacity:1!important;pointer-events:auto!important;font-size:12px;color:var(--pill-ink);background:none!important;backdrop-filter:none;-webkit-backdrop-filter:none}
.flip-study-page .liquid-selector .board-info::after{content:'';position:absolute;inset:12px;border:1px solid currentColor;border-radius:50%;opacity:.35;pointer-events:none}
[data-edition=sketch] .liquid-selector .liquid-tint{fill:rgba(99,112,126,.22)}
[data-edition=sketch] .liquid-selector .pill-word-lens{background:rgba(115,130,147,.14)}
@media(max-width:480px){.flip-study-page .board-label-row.liquid-selector{width:min(288px,calc(100% - 32px))}.board-style-option,.board-style-option[aria-checked=true]{font-size:12px}}
@media(prefers-reduced-motion:reduce){.board-style-option span{transition:none}}

.octave-home .flip-enabled .piece-prompt{font-size:11px;line-height:16px}

/* A quiet lift on pointer hover, without shifting the selection rail. */
@media(hover:hover) and (pointer:fine){
 .liquid-selector:not(.is-dragging) .board-liquid-shell{scale:1;transition:scale .38s cubic-bezier(.22,1,.36,1)!important}
 .liquid-selector:not(.is-dragging) .board-liquid-shell:has(.board-pill:hover){scale:1.14}
 .liquid-selector .board-style-options:first-child .board-style-option span{transition:scale .38s cubic-bezier(.22,1,.36,1),opacity .3s ease}
 .liquid-selector:not(.is-dragging) .board-style-options:first-child .board-style-option:hover span,
 .liquid-selector:not(.is-dragging):has(.board-pill:hover) .board-style-options:first-child .board-style-option[aria-checked=true] span{scale:1.1;opacity:1}
 .liquid-selector .board-style-options:first-child .board-style-option{border-radius:999px;transition:background-color .3s ease}
 .liquid-selector:not(.is-dragging) .board-style-options:first-child .board-style-option:hover{background-color:color-mix(in srgb,var(--pill-ink) 5%,transparent)}
}
.liquid-selector .board-style-option:focus-visible span{scale:1.1;opacity:1}
@media(prefers-reduced-motion:reduce){
 .liquid-selector:not(.is-dragging) .board-liquid-shell,.liquid-selector .board-style-options:first-child .board-style-option span{transition:none!important}
}

.has-3d-back.is-flipped>queen-scene{pointer-events:auto!important}
.about-floating-piece{pointer-events:auto!important;cursor:grab}.about-floating-piece:active{cursor:grabbing}

.board-story-cue{font:600 clamp(16px,1.3vw,20px)/1.4 'ABC Oracle',sans-serif;margin:0 0 12px}