/* New prototype UI. Original hein layout, typography, colors and buttons live in reference.css. */
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}body{margin:0;background:#fff}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button{line-height:1.4}h1,h2,p{margin:0}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b3003f;outline-offset:5px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:#fff;padding:15px}.skip-link:focus{top:15px}
#sidebar .sidebar-collapse .nav{display:flex;flex-direction:column;gap:7px}.nav-link{padding:8px 15px}.nav-item{list-style:none}#sidebar .workspace-selection .ts-control{position:relative}#sidebar .workspace-selection .ts-control::before,#sidebar .workspace-selection .ts-control::after{display:none}#sidebar .workspace-selection .ts-control{padding-right:30px}.nav-prototype{font-size:10px;font-weight:600;color:#a8003a;background:#fff;border-radius:4px;padding:2px 5px;margin-left:4px;vertical-align:middle}body.sidebar-closed{--sidebar-width:0px}body.sidebar-closed #sidebar .sidebar-collapse{display:none}
.prototype-toast{position:fixed;bottom:22px;left:calc(var(--sidebar-width) + 25px);z-index:40;background:#292226;color:#fff;max-width:calc(100vw - var(--sidebar-width) - 50px);padding:13px 18px;border-radius:8px;font-size:12px;box-shadow:0 5px 20px #0002}main[role=main]{max-width:1960px}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.page-header .introduction{margin-bottom:29px}.page-header .title{margin:0}.breadcrumb-separator{margin:0 10px;color:#888}.prototype-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;background:#faf4f2;color:#685753;padding:8px 12px;border-radius:6px;margin-top:7px;white-space:nowrap}.prototype-label>span{width:6px;height:6px;background:#a07466;border-radius:50%}.page-intro{margin:0 0 31px;max-width:680px}.page-intro h2{font-size:23px;line-height:1.35;font-weight:600;margin-bottom:10px}.page-intro p{font-size:14px;line-height:1.8;color:#686569;max-width:640px}
.experiment{display:grid;grid-template-columns:minmax(0,1fr) 294px;border:1px solid #e8e5e4;border-radius:15px;overflow:hidden}.viewer{min-width:0;background:#f7f7f6;padding:21px 28px 20px;display:flex;flex-direction:column}.viewer-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#5b5858}.viewer-topline>span{display:flex;align-items:center;gap:7px}.live-dot{height:6px;width:6px;background:#f50056;border-radius:50%}.text-button{padding:0;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:#666;text-decoration:none}.text-button:hover{color:#a8003a}.card-stage{min-height:330px;padding:40px 12px 28px;display:flex;align-items:center;justify-content:center;perspective:1100px;flex:1}.card-perspective{width:100%;max-width:570px;perspective:1100px}.lenticular-card{--mix:0;--rx:0deg;--ry:-5deg;--light:25%;position:relative;aspect-ratio:1.586;width:100%;border-radius:12px;background:#fbdfdb;box-shadow:0 19px 24px -15px #3b2a3045,0 2px 4px #3b2a3010;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz,0deg));transform-style:preserve-3d;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;overflow:hidden;container-type:inline-size}.card-face{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;background:var(--face-bg);backface-visibility:hidden}.card-face-b{z-index:2;mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--mix)*100%),transparent calc(var(--mix)*100%),transparent 100%);mask-size:6px 100%;mask-repeat:repeat;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--mix)*100%),transparent calc(var(--mix)*100%),transparent 100%);-webkit-mask-size:6px 100%;-webkit-mask-repeat:repeat}.lenticular-card[data-effect=fade] .card-face-b{mask-image:none;-webkit-mask-image:none;opacity:var(--mix)}.face-content{position:relative;flex:1;padding:6cqw 7cqw 3cqw;display:flex;flex-direction:column}.face-eyebrow{font-size:2.2cqw;letter-spacing:.07em;text-transform:uppercase;font-weight:600;line-height:1.3;color:#4b4546}.face-title{font-size:8.8cqw;line-height:1.1;letter-spacing:-.045em;font-weight:700;margin-top:3cqw;max-width:90%;z-index:1}.card-face-a .face-title{font-size:10.7cqw}.face-title span{display:block}.face-note{margin-top:auto;padding-top:2.5cqw;max-width:84%;font-size:2.25cqw;font-weight:500;line-height:1.6;color:#393737}.face-guus{position:absolute;right:7cqw;top:5.5cqw;width:5cqw;height:auto;opacity:.65}.face-footer{width:100%;height:auto;display:block;flex-shrink:0;pointer-events:none}.card-sheen{position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 8%,rgba(255,255,255,.03) 26%,rgba(255,255,255,.18) 42%,transparent 60%);background-position:var(--light) 50%;background-size:170% 100%;mix-blend-mode:screen;opacity:.8}.card-edge{position:absolute;inset:0;z-index:4;border:1px solid #00000009;border-radius:12px;pointer-events:none}.lenticular-card.no-finish{transform:none}.no-finish .card-sheen{display:none}
.interaction-hint{display:flex;gap:9px;justify-content:center;align-items:center;font-size:12px;color:#686264;min-height:25px;margin-top:2px}.interaction-hint i{font-size:14px;color:#9c6c7a}.scrubber{max-width:570px;margin:23px auto 0;width:100%;padding:0 11px}.scrubber-labels{display:flex;justify-content:space-between;gap:20px;margin-bottom:9px}.state-label{border:0;background:none;display:flex;align-items:center;gap:7px;color:#706c6d;font-size:11px;padding:2px 0}.state-label>span{border:1px solid #ded8da;border-radius:4px;min-width:21px;line-height:20px;font-size:10px;font-weight:600;background:#fff}.state-label.active{color:#a6003a;font-weight:600}.state-label.active>span{border-color:#f50056;background:#f50056;color:#fff}#angle{display:block;width:100%;height:20px;margin:0;accent-color:#f50056;cursor:ew-resize;background:transparent}#angle-help{font-size:10px;color:#787075;text-align:center;margin-top:6px}
.settings{background:#fff;padding:24px 24px 20px;border-left:1px solid #e8e5e4}.section-kicker{font-size:9px;letter-spacing:.1em;font-weight:600;color:#857b7e}.settings-heading{margin-bottom:24px}.settings-heading h2{font-size:17px;line-height:1.4;font-weight:600;margin-top:6px;letter-spacing:-.025em}.setting-group{padding:0;border:0;margin:0 0 23px;min-width:0}.setting-group legend{font-size:13px;font-weight:600;margin-bottom:11px}.sample-options{display:grid;gap:8px}.sample-option{border:1px solid #e8e3e3;background:#fff;padding:10px;border-radius:8px;text-align:left;display:flex;gap:11px;align-items:center;width:100%;position:relative}.sample-option[aria-pressed=true]{border-color:#f50056;background:#fff8fa}.sample-option:hover{border-color:#c9abb5}.sample-preview{width:46px;height:31px;flex-shrink:0;background:#fbdfdb;border-radius:3px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:6px;gap:3px;border-bottom:5px solid #fff}.sample-preview>span{height:3px;display:block;border-radius:1px;background:#282326;width:28px}.sample-preview>span:last-child{width:20px}.sample-option strong{font-size:12px;display:block;line-height:1.45;font-weight:600}.sample-option small{display:block;font-size:10px;color:#837c7f;margin-top:2px}.sample-option>i{font-size:13px;color:#f50056;margin-left:auto;visibility:hidden}.sample-option[aria-pressed=true]>i{visibility:visible}.field-note{font-size:11px;line-height:1.7;color:#7c7377;margin-top:9px}.effect-switch{padding:4px;background:#f4f2f2;border-radius:7px;display:grid;grid-template-columns:1fr 1fr;gap:3px}.effect-switch button{padding:8px 5px;border:0;background:none;border-radius:5px;font-size:11px;color:#766c71}.effect-switch button[aria-pressed=true]{background:#fff;color:#a6003a;box-shadow:0 1px 3px #00000010;font-weight:600}.sensor-setting .btn{padding:10px 12px;font-size:10px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border-color:#ded8da;border-radius:7px;font-weight:500}.sensor-setting .btn[aria-pressed=true]{color:#a8003a;border-color:#f50056;background:#fff8fa}.sensor-setting .btn:disabled{cursor:wait}.sensor-setting>.text-button{font-size:10px;margin-top:6px;color:#a8003a}.reset-button{border:0;background:none;margin:16px auto 0;display:flex;justify-content:center;gap:7px;font-size:10px;color:#71676b;padding:6px;width:100%}.reset-button:hover{color:#a8003a}
.message-readout{display:flex;align-items:center;gap:15px;border-bottom:1px solid #e8e5e4;padding:21px 6px}.readout-icon{width:35px;height:35px;display:flex;align-items:center;justify-content:center;background:#fdf1f2;border-radius:9px;color:#c40046;flex-shrink:0}.message-readout .section-kicker{display:block;font-size:8px;line-height:1.5}.message-readout p{font-size:13px;font-weight:500;margin-top:3px;line-height:1.7}.readout-count{margin-left:auto;color:#857c80;font-size:10px;white-space:nowrap}.prototype-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;padding:19px 0 0}.prototype-footer p{font-size:10px;color:#82797d;line-height:1.9;max-width:550px}.prototype-footer strong{font-weight:500;color:#5b5357}.prototype-footer .text-button{white-space:nowrap;font-size:10px;margin-top:3px}.about-panel{font-size:12px;line-height:1.9;color:#6b6267;margin:18px 0 0;padding:22px;background:#faf6f5;border-radius:10px;max-width:850px}.about-panel h2{font-size:15px;color:#211a1e;margin-bottom:10px}.about-panel p+p{margin-top:10px}.noscript-note{margin:20px 20px 20px 370px}.mobile-menu-backdrop{display:none}
body.focus-view #sidebar{display:none}body.focus-view{--sidebar-width:0px;--main-padding-x:clamp(20px,6vw,110px)}body.focus-view .experiment{grid-template-columns:minmax(0,1fr) 294px}body.focus-view .card-perspective{max-width:780px}body.focus-view .card-stage{min-height:450px}body.focus-view .scrubber{max-width:780px}body.focus-view .page-header,body.focus-view .page-intro{display:none}body.focus-view main[role=main]{padding-top:30px}
@media(min-width:1650px){.card-stage{min-height:410px;padding-top:45px;padding-bottom:40px}.card-perspective,.scrubber{max-width:650px}.settings{padding:28px}.experiment{grid-template-columns:minmax(0,1fr) 320px}.setting-group{margin-bottom:27px}}
@media(max-width:1390px){body{--main-padding-x:45px;--main-padding-y:38px}.experiment{grid-template-columns:minmax(0,1fr) 264px}.settings{padding:22px 19px}.viewer{padding-left:23px;padding-right:23px}.card-stage{min-height:290px;padding-left:0;padding-right:0}.viewer-topline .text-button{font-size:10px}}
@media(max-width:1199px){body{--sidebar-width:280px;--main-padding-x:35px;--heading-lg-font-size:3.6rem}#sidebar .sidebar-collapse{padding:40px 23px}.experiment{grid-template-columns:minmax(0,1fr) 244px}.settings{padding:20px 15px}.viewer{padding:20px}.settings-heading h2{font-size:15px}.card-stage{min-height:250px}.page-intro h2{font-size:21px}.prototype-label{font-size:10px;padding:7px 9px}}
@media(max-width:1040px) and (min-width:901px){body{--sidebar-width:240px;--main-padding-x:27px}#sidebar .sidebar-collapse{padding:30px 18px}#sidebar .sidebar-collapse .nav .nav-item .subnav{padding-left:43px}#sidebar .sidebar-collapse .nav .nav-item .subnav .subnav-link{font-size:14px}.experiment{grid-template-columns:1fr}.settings{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;border-left:0;border-top:1px solid #e8e5e4;padding:25px}.settings-heading{grid-column:1/-1}.sensor-setting{grid-column:2;grid-row:3}.reset-button{grid-column:1/-1}.card-stage{min-height:320px}.viewer-topline .text-button{font-size:11px}}
@media(max-width:900px){body{--sidebar-width:0px;--main-padding-x:35px;--main-padding-y:30px;--heading-lg-font-size:3.8rem}#sidebar .sidebar-collapse{display:none}#sidebar .toggle-collapse{position:fixed;left:0;right:auto;top:29px;transform:none;width:28px;padding:9px 0;font-size:14px;z-index:31}body.mobile-menu-open #sidebar{z-index:30}body.mobile-menu-open #sidebar .sidebar-collapse{display:block;width:280px;position:fixed;z-index:30;box-shadow:5px 0 30px #0000001a;background:#fcece9}body.mobile-menu-open #sidebar .toggle-collapse{left:280px}body.mobile-menu-open .mobile-menu-backdrop{display:block;position:fixed;inset:0;background:#0005;z-index:25}.experiment{grid-template-columns:minmax(0,1fr) 270px}.settings{padding:23px 20px}.card-stage{min-height:300px}.prototype-footer p{max-width:480px}.noscript-note{margin:20px}}
@media(max-width:700px){body{--main-padding-x:24px;--main-padding-y:27px;--heading-lg-font-size:3.1rem}.page-header .introduction{margin-bottom:25px}.page-header .subtitle{font-size:11px;padding-left:10px}.page-header .title::after{height:7px;margin-top:9px}.prototype-label{font-size:9px;padding:6px 7px;margin-top:3px;gap:5px}.page-header{gap:7px}.page-intro{margin-bottom:25px}.page-intro h2{font-size:20px;max-width:300px}.page-intro p{font-size:12px;line-height:1.9}.experiment,body.focus-view .experiment{grid-template-columns:1fr}.viewer{padding:18px 18px 17px}.viewer-topline{font-size:10px}.card-stage{min-height:0;padding:35px 5px 25px}.card-perspective{max-width:530px}.interaction-hint{font-size:11px;margin-top:3px}.scrubber{margin-top:21px;padding:0 6px}.settings{border-left:0;border-top:1px solid #e8e5e4;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:24px}.settings-heading{grid-column:1/-1;margin-bottom:20px}.settings-heading h2{font-size:18px}.settings .setting-group{margin-bottom:20px}.sample-option{padding:8px}.sample-preview{width:30px;height:26px;padding-left:4px}.sample-preview>span{width:18px;height:2px}.sample-preview>span:last-child{width:14px}.sample-option strong{font-size:10px}.sample-option small{font-size:8px}.sample-option>i{font-size:10px}.sensor-setting{grid-column:1/-1}.sensor-setting .btn{font-size:12px;padding:12px}.sensor-setting .field-note{font-size:10px}.reset-button{grid-column:1/-1}.prototype-footer{flex-direction:column;gap:10px}.prototype-footer p{font-size:9px}.prototype-footer .text-button{font-size:10px}.message-readout p{font-size:12px}.readout-icon{width:30px;height:30px}.message-readout{gap:10px;padding-inline:0}.readout-count{font-size:9px}.section-kicker{font-size:9px}body.focus-view .card-stage{min-height:0}body.focus-view .settings{display:none}body.focus-view .viewer-topline{font-size:10px}}
@media(max-width:390px){body{--main-padding-x:18px;--heading-lg-font-size:2.7rem}.prototype-label{font-size:8px}.viewer{padding-inline:13px}.settings{padding:22px 18px;gap:0 13px}.sample-option{gap:7px}.sample-option>i{display:none}.page-intro h2{font-size:18px}.effect-switch button{font-size:9px}}
/* New orientation controls and phone-first sensor entry, independent of the reference layout. */
.format-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:11px;color:#756b70}
.format-switch{display:flex;gap:3px;background:#eeebeb;padding:3px;border-radius:7px}
.format-switch button{border:0;background:none;padding:7px 11px;display:flex;align-items:center;gap:6px;border-radius:5px;color:#70666b;font-size:11px}
.format-switch button[aria-pressed=true]{background:#fff;color:#a6003a;font-weight:600;box-shadow:0 1px 3px #0001}
.format-switch small{font-size:8px;opacity:.7}
.experiment[data-format=portrait] .card-perspective{max-width:360px}
.experiment[data-format=portrait] .lenticular-card{aspect-ratio:210 / 297}
.experiment[data-format=portrait] .card-stage{padding-top:25px;padding-bottom:28px}
.experiment[data-format=portrait] .face-content{padding:11cqw 8cqw 8cqw}
.experiment[data-format=portrait] .face-eyebrow{font-size:3cqw}
.experiment[data-format=portrait] .face-title{font-size:12cqw;margin-top:15cqw;max-width:100%;line-height:1.13}
.experiment[data-format=portrait] .card-face-a .face-title{font-size:16cqw}
.experiment[data-format=portrait] .face-note{font-size:3.4cqw;max-width:100%;line-height:1.7}
.experiment[data-format=portrait] .face-guus{width:7cqw;right:8cqw;top:9.5cqw}
.mobile-tilt-panel{background:#fff8fa;border:1px solid #f5d8e2;padding:12px;border-radius:9px;margin-top:15px;text-align:center}
.mobile-tilt-panel>button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px solid #f50056;background:#f50056;color:#fff;border-radius:7px;padding:12px;font-size:12px;font-weight:600}
.mobile-tilt-panel>button:disabled{cursor:wait;opacity:.7}
.mobile-tilt-panel>p{font-size:10px;line-height:1.65;color:#7c515f;margin-top:8px}
.mobile-tilt-panel.tilt-ready{background:#edf5f2;border-color:#d1e3dd}
.mobile-tilt-panel.tilt-ready>button{background:#fff;border-color:#aaccc0;color:#2b5f4d}
.mobile-tilt-panel.tilt-ready>p{color:#426c5f}
.phone-tilt .lenticular-card{cursor:default}
.mobile-entry{border:1px solid #f3dce4;border-radius:18px;max-width:370px;width:calc(100% - 36px);padding:28px;text-align:center;box-shadow:0 20px 70px #37262d33;color:#251c21}
.mobile-entry::backdrop{background:#fcece9ed;backdrop-filter:blur(5px)}
.mobile-entry>img{display:block;margin:0 auto 20px;width:60px;height:auto}
.mobile-entry .section-kicker{display:block;color:#a6003a;font-size:10px}
.mobile-entry h2{font-size:25px;line-height:1.25;letter-spacing:-.03em;margin:10px 0 16px}
.mobile-entry>p{font-size:12px;line-height:1.8;color:#73656c}
#mobile-entry-start{display:flex;align-items:center;justify-content:center;gap:9px;background:#f50056;color:#fff;border:0;border-radius:9px;padding:15px 12px;font-size:13px;font-weight:600;width:100%;margin-top:23px}
#mobile-entry-start:disabled{opacity:.65;cursor:wait}
#mobile-entry-status{font-size:10px;margin-top:13px;line-height:1.7}
#mobile-entry-skip{border:0;background:none;color:#82747b;font-size:11px;margin-top:16px;text-decoration:underline;padding:6px}
@media(max-width:700px){.format-row{font-size:10px;margin-top:15px}.format-switch button{font-size:10px;padding:7px 9px}.experiment[data-format=portrait] .card-perspective{max-width:310px}.experiment[data-format=portrait] .card-stage{padding-top:25px;padding-bottom:25px}.mobile-tilt-panel{margin-top:13px}.phone-tilt .interaction-hint{font-size:10px;line-height:1.6;text-align:center}}
@media(max-width:900px){#sidebar,body.mobile-menu-open #sidebar,#menu-backdrop{display:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.lenticular-card{transform:none}.card-sheen{display:none}.card-face-b{mask-image:none!important;-webkit-mask-image:none!important;opacity:var(--accessible-mix,0)!important}}