@import url('fonts.css');
:root{color-scheme:dark;font-family:Manrope,Arial,sans-serif;color:#f1e5d6;background:#17120f;--gold:#c18b60;--muted:#b4a290;--line:#c18b602b}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.experience{max-width:1600px;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 48% 45%,#49301d80,transparent 57%),#17120f}header{padding:25px 4%;display:flex;justify-content:space-between;gap:25px;align-items:center;border-bottom:1px solid var(--line)}header>a{font-size:10px;letter-spacing:2px}header small{font-size:7px;color:var(--gold);display:block;margin-top:7px;letter-spacing:2px}header>span{font-size:7px;letter-spacing:2px;color:var(--muted)}.stage{position:relative;height:clamp(480px,67vh,760px);width:100%;isolation:isolate;cursor:grab;touch-action:pan-y}.stage.dragging{cursor:grabbing}.stage canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;outline-offset:-7px}.artwork{position:absolute;left:50%;top:0;transform:translateX(-50%);width:100%;height:100%;object-fit:contain}.ready:not(.art-mode) .artwork{display:none}.art-mode canvas{visibility:hidden}.art-mode .stage{cursor:default}.title{position:absolute;left:4%;top:13%;z-index:3;pointer-events:none;max-width:230px}.title>span{font-size:6px;letter-spacing:1.6px;color:var(--muted)}h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(42px,5vw,73px);font-weight:400;line-height:1.02;letter-spacing:-1.7px;margin:22px 0}h1 em{color:var(--gold);font-weight:400}.caption{position:absolute;right:4%;bottom:22%;z-index:3;pointer-events:none;text-align:right;max-width:210px}.caption>span{font-size:6px;letter-spacing:1.4px;color:var(--gold)}.caption p{font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;line-height:1.3;margin-top:16px}.floor{position:absolute;bottom:7%;left:50%;width:27%;height:4%;transform:translateX(-50%);background:#050403aa;border-radius:50%;filter:blur(14px);z-index:1;display:none}.ready:not(.art-mode) .floor{display:block}.bottom{padding:20px 4%;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line)}#status{font-size:9px;color:var(--muted);margin:0;letter-spacing:.3px}.controls{display:flex;gap:7px;flex-wrap:wrap}.controls button{font-size:9px;background:transparent;border:1px solid var(--line);padding:10px 13px}.controls button:hover:not(:disabled),.controls button[aria-pressed=true]{background:#c18b6015;border-color:#c18b6077}.finishes{padding:5px 4% 15px;display:flex;align-items:center;gap:19px;flex-wrap:wrap}.finishes>span{font-size:6px;letter-spacing:1.8px;color:var(--muted)}.finishes button{font-size:9px;background:transparent;border:0;border-bottom:1px solid transparent;padding:9px 0;display:flex;align-items:center;gap:7px;color:var(--muted)}.finishes button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.finishes i{width:9px;height:9px;background:var(--color);border-radius:50%;box-shadow:inset 2px 1px 2px #fff4,inset -2px -1px 2px #0006}#art-toggle{margin-left:auto}.help{font-size:7px;letter-spacing:1px;color:#a48e76;text-align:center;padding:0 15px 19px;margin:0}.embed header{display:none}.embed .stage{height:525px}.embed h1{font-size:58px}.embed .caption{max-width:165px}.embed .caption p{font-size:22px}
@media(max-width:900px){.title{top:9%;max-width:160px}.title>span{font-size:5px;line-height:1.9;display:block;max-width:150px}.title h1,.embed h1{font-size:45px}.caption,.embed .caption{bottom:9%;max-width:150px}.caption p{font-size:19px}.caption>span{font-size:5px}.bottom{align-items:flex-start;flex-direction:column;gap:13px}}
@media(max-width:600px){header>span{display:none}header{padding:20px 5%}.stage,.embed .stage{height:540px}.title{top:20px;left:6%;max-width:190px}.title h1,.embed h1{font-size:36px;line-height:1;margin-top:10px}.caption,.embed .caption{bottom:14px;right:6%;max-width:180px}.caption p,.embed .caption p{font-size:19px;margin:9px 0}.title>span{max-width:none}.bottom{padding:18px 6%}.controls{gap:5px;width:100%}.controls button{padding:10px;font-size:8px;flex:1;white-space:nowrap}.finishes{padding:0 6% 14px;gap:13px}.finishes>span{width:100%;margin-top:6px}.finishes button{font-size:8px}.artwork{top:13%;height:72%}.floor{bottom:11%;width:44%}#art-toggle{margin-left:0}.help{font-size:6px}}

/* A seamless, directly manipulable version for the storefront hero. */
body.hero{background:#14100e}
.hero .experience{background:radial-gradient(ellipse at 50% 48%,#58332632,transparent 63%),#14100e}
.hero header,.hero .title,.hero .caption,.hero .bottom,.hero .finishes,.hero .help{display:none}
.hero .stage{height:100dvh;min-height:0}
.hero .artwork{top:0;height:100%}
.hero .floor{bottom:10%;width:35%}

.hero .stage{touch-action:none}.hero .artwork{mix-blend-mode:screen;mask-image:radial-gradient(ellipse,#000 47%,transparent 74%)}