*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-top: #f6f0e8;--bg-bottom: #cbc4bc;--ink: #161413;--ink-soft: rgba(22, 20, 19, .72);--line: rgba(255, 255, 255, .26);--panel: rgba(251, 247, 240, .14);--panel-border: rgba(255, 255, 255, .2);--shadow: rgba(20, 18, 17, .18);--accent: #e7dbcc;--accent-rgb: 231, 219, 204}html,body{height:100%;background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);color:var(--ink);font-family:Inter,sans-serif;overflow:hidden}#app{position:relative;height:100vh}.experience-shell{position:relative;display:grid;grid-template-columns:15% 85%;width:100%;height:100%;overflow:hidden}.info-panel{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:flex-start;padding:40px 18px 34px 28px}.stage-shell{position:relative;min-width:0}.experience-shell[data-material=silk]{--accent: #ece1d4;--accent-rgb: 236, 225, 212}.experience-shell[data-material=linen]{--accent: #ccb089;--accent-rgb: 204, 176, 137}.experience-shell[data-material=denim]{--accent: #4b61a9;--accent-rgb: 75, 97, 169}.experience-shell[data-material=polyester]{--accent: #6fa493;--accent-rgb: 111, 164, 147}.fabric-stage,.overlay-ui{position:absolute;inset:0}.fabric-stage{overflow:hidden;background:radial-gradient(circle at 50% 44%,#fffcf6f7,#fffcf638 24%,#ded6cc0d 46%,#bcb4aa14 72%,#9991881f),linear-gradient(180deg,#fffbf68a,#cfc6bd94)}.stage-glow,.stage-vignette{position:absolute;inset:0;pointer-events:none}.stage-glow{background:radial-gradient(circle at 50% 48%,rgba(var(--accent-rgb),.32),rgba(var(--accent-rgb),.08) 22%,#fff0 52%),radial-gradient(circle at 50% 58%,#fff3,#fff0 42%);mix-blend-mode:screen}.stage-vignette{background:linear-gradient(180deg,#0b0a091f,#0b0a0900 24% 74%,#0b0a0926),radial-gradient(circle at center,#0000 42%,#0d0b0a42)}.canvas-wrap{position:absolute;inset:5.5vh 7vw 8vh;border-radius:38px;overflow:hidden;box-shadow:0 30px 64px #1412111f,inset 0 0 0 1px #00000026;background:#ffffff24;transition:filter .22s ease,box-shadow .22s ease}.canvas-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,#ffffff2e,#fff0 34%),linear-gradient(180deg,#ffffff0f,#fff0 18%,#00000014)}.canvas-wrap.memory-map{filter:saturate(1.25) contrast(1.08) hue-rotate(-8deg);box-shadow:0 32px 70px rgba(var(--accent-rgb),.18),0 24px 48px #13100e38,inset 0 0 0 1px #ffffff24}.canvas-wrap.memory-map:after{background:linear-gradient(180deg,#6fa7ff0a,#fff0 26%,#ff865c14),radial-gradient(circle at 50% 48%,#fff8f029,#fff0 40%)}#fabric-canvas{display:block;width:100%;height:100%;cursor:grab}#fabric-canvas:active{cursor:grabbing}.overlay-ui{z-index:2;display:flex;justify-content:flex-end;padding:28px;pointer-events:none}.material-copy,.material-panel,.overlay-bottom{pointer-events:auto}.material-copy{max-width:100%;padding-top:4px}.eyebrow,.panel-kicker{font-size:11px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#00000080;margin-bottom:26px}.material-title{font-family:Cormorant Garamond,serif;font-size:48px;font-weight:400;line-height:.9;letter-spacing:-.01em;color:#000000e6}.material-descriptor{margin-top:20px;max-width:18ch;font-size:14px;line-height:1.6;color:#0000008c}.material-state{margin-top:34px}.state-heading{margin-bottom:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#00000059}.state-list{display:grid;gap:8px}.state-item{font-size:13px;letter-spacing:.04em;color:#0000008c}.panel-controls{margin-top:42px;display:grid;gap:28px}.panel-control-group{display:grid;gap:16px}.panel-control-list{display:grid;gap:10px}.selector-trigger,.scenario-trigger,.memory-toggle{background:transparent;border:1px solid rgba(0,0,0,.18);color:#000000bf}.selector-trigger,.scenario-trigger{border-radius:999px;padding:10px 16px;font-family:Inter,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .18s ease,transform .18s ease,border-color .18s ease}.selector-trigger:hover,.scenario-trigger:hover,.selector-trigger[aria-expanded=true]{background:#0000000d;border-color:#0000002e;transform:translateY(-1px)}.scenario-trigger[data-active=true]{background:#00000014;border-color:#00000026;color:#000000e6}.scenario-trigger:disabled{background:#00000005;border-color:#0000000d;color:#00000059;opacity:1;cursor:default;transform:none}.panel-button,.panel-toggle{justify-content:flex-start;width:100%}.memory-toggle{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;font-family:Inter,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.memory-toggle input{appearance:none;width:34px;height:20px;border-radius:999px;background:#ffffff47;position:relative;outline:none;transition:background .18s ease}.memory-toggle input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fffaf3f5;transition:transform .18s ease}.memory-toggle input:checked{background:rgba(var(--accent-rgb),.88)}.memory-toggle input:checked:after{transform:translate(14px)}.material-panel{align-self:flex-end;width:min(760px,calc(100vw - 56px));padding:22px;border-radius:28px;background:#f8f3eb24;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.material-panel[hidden]{display:none}.panel-header{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px}.panel-note{max-width:34ch;font-size:.94rem;line-height:1.5;color:#fffaf3c7}.material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.material-tile{display:grid;gap:10px;padding:16px;text-align:left;border-radius:22px;border:1px solid rgba(255,255,255,.14);background:#fffcf714;color:#fffaf3f2;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}.material-tile:hover,.material-tile.active{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.58);background:#ffffff21}.material-swatch{display:block;width:100%;height:74px;border-radius:16px;box-shadow:inset 0 0 0 1px #ffffff29}.tile-title{font-family:Cormorant Garamond,serif;font-size:2rem;line-height:.9}.tile-descriptor{font-size:.95rem;color:#fff8f1e6}.tile-copy{font-size:.88rem;line-height:1.45;color:#fff8f1b8}@media(max-width:900px){.experience-shell{grid-template-columns:1fr}.info-panel{position:absolute;inset:20px 18px auto;padding:0;max-width:280px}.stage-shell{grid-column:1;grid-row:1}.canvas-wrap{inset:9vh 4vw 10vh;border-radius:28px}.overlay-ui{padding:20px 18px 24px}.material-panel{width:100%}.material-grid{grid-template-columns:1fr}.panel-header{flex-direction:column}}@media(max-width:560px){.material-title{font-size:40px}.material-descriptor{font-size:.94rem}.memory-toggle,.selector-trigger,.scenario-trigger{width:100%;justify-content:center}}