:root{font-family:Arial,Helvetica,sans-serif;color:#e9e7df;background:#10191d;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 70% 0,#26383e 0,transparent 35rem),#10191d}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.masthead,footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:24px clamp(20px,4vw,64px);border-bottom:1px solid #3a4a4d;font-size:11px;letter-spacing:.18em}.masthead a:first-child,footer a{color:#b2c3c2}.wordmark{font-weight:800}main{max-width:1540px;margin:auto;padding:0 clamp(20px,4vw,64px)}.intro{padding:68px 0 46px;max-width:740px}.eyebrow,.index{font-size:11px;letter-spacing:.23em;color:#c9af83;font-weight:700}.intro h1{font-family:Georgia,serif;font-size:clamp(48px,7vw,104px);font-weight:400;line-height:.97;letter-spacing:-.055em;margin:18px 0 28px}.intro h1 em{color:#c9af83;font-weight:400}.intro>p:last-child{color:#aebcba;line-height:1.65;max-width:610px}.workspace{display:grid;grid-template-columns:minmax(320px,410px) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start;margin-bottom:72px}.editor{grid-column:1;grid-row:1;padding:28px;background:#172329;border:1px solid #3b4c50}.editor-heading{border-top:1px solid #3b4c50;padding-top:24px;margin:27px 0 16px}.editor-heading:first-child{border:0;padding-top:0;margin-top:0}.editor-heading h2{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:8px 0}.editor>label,.color-control>label{display:flex;justify-content:space-between;margin:19px 0 8px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:#b6c6c4;font-weight:bold}.editor select,.editor input[type=text]{width:100%;border:1px solid #55696a;color:#f3f0e9;background:#10191d;padding:13px 12px;min-height:46px;border-radius:2px}.editor input:focus-visible,.editor select:focus-visible,.editor button:focus-visible{outline:2px solid #d4c5a7;outline-offset:3px}.editor input[type=range]{width:100%;accent-color:#c9af83}.hint{font-size:12px;line-height:1.6;color:#a5b4b4}.color-row{display:flex;align-items:flex-start;gap:12px}.swatches{display:flex;gap:8px;flex:1;flex-wrap:wrap}.swatch{width:35px;height:35px;padding:0;border-radius:50%;border:2px solid #ffffff1f;flex:0 0 auto}.swatch[aria-pressed=true]{outline:2px solid #d4c5a7;outline-offset:3px}.custom-color{width:48px;margin:0!important;display:flex!important;flex-direction:column;align-items:center;gap:5px;color:#91a4a3!important;font-size:8px!important;letter-spacing:.08em!important;text-transform:uppercase}.custom-color input[type=color]{width:38px;height:38px;border:1px solid #6a7d7e;border-radius:50%;background:transparent;padding:3px;overflow:hidden}.custom-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}.custom-color input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}.custom-color input[type=color]::-moz-color-swatch{border:0;border-radius:50%}.color-combos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.color-combo{min-height:42px;border:1px solid #536668;background:#10191d;color:#c8d2d0;padding:7px 9px;display:flex;align-items:center;gap:9px;font-size:10px;text-align:left}.color-combo[aria-pressed=true]{border-color:#d4c5a7;box-shadow:0 0 0 1px #d4c5a7}.combo-chip{width:31px;height:20px;border-radius:12px;border:1px solid #ffffff42;box-shadow:inset -11px 0 var(--ink);background:var(--background);flex:0 0 auto}#download{background:#c9af83;border:0;color:#142027;width:100%;min-height:52px;padding:14px 15px;display:flex;justify-content:space-between;font-weight:800;margin-top:24px}#download:disabled{opacity:.5;cursor:wait}.preview-area{grid-column:2;grid-row:1;position:sticky;top:28px}.preview-heading{display:flex;justify-content:space-between;color:#a6bab8;font-size:11px;letter-spacing:.17em;margin:0 0 13px}.canvas-frame{--ratio:.75;position:relative;width:min(100%,calc((100vh - 130px) * var(--ratio)),calc(700px * max(1,var(--ratio))));margin:auto;box-shadow:0 22px 65px #0009}#poster{display:block;width:100%;height:auto}.status{position:absolute;inset:0;background:#182329ed;color:#f5eee1;display:grid;place-items:center;text-align:center;padding:24px;font-size:14px}.status[hidden]{display:none}footer{border-top:1px solid #3a4a4d;border-bottom:0}
@media(max-width:850px){.intro{padding-top:45px}.workspace{display:flex;flex-direction:column;gap:18px;margin-bottom:52px}.preview-area{order:1;position:sticky;top:env(safe-area-inset-top,0);z-index:20;width:calc(100% + 40px);margin-left:-20px;padding:10px 20px 12px;background:#10191df2;border-bottom:1px solid #3a4a4d;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.preview-heading{margin-bottom:8px}.preview-heading>span{display:none}.view-switch{margin:auto}.canvas-frame{width:min(calc(100vw - 40px),calc(34vh * var(--ratio)),calc(230px * max(1,var(--ratio))));max-width:none;box-shadow:0 10px 35px #000b}.status{font-size:11px;padding:12px}.editor{order:2;width:100%}}
@media(max-width:480px){.masthead{flex-wrap:wrap}.masthead span{display:none}.editor{padding:20px}.swatches{gap:7px}.swatch{width:31px;height:31px}.color-row{gap:8px}.color-combos{grid-template-columns:1fr 1fr}.color-combo{padding:7px;font-size:9px}.custom-color input[type=color]{width:35px;height:35px}}
.color-combo{min-height:50px}.combo-copy{display:flex;flex-direction:column;gap:2px}.combo-copy small{font-size:8px;color:#829492;white-space:nowrap}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;padding:12px 14px;border:1px solid #33464a;background:#10191d;font-size:11px;line-height:1.45}.facts[hidden]{display:none}.facts dt{color:#8fa3a2;text-transform:uppercase;letter-spacing:.12em;font-size:9px;padding-top:2px}.facts dd{margin:0;color:#dfe3dc}

.preview-heading{align-items:center;gap:12px}
.view-switch{display:flex;border:1px solid #4b5d60;border-radius:20px;padding:2px}
.view-switch button{border:0;background:none;color:#a6bab8;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:16px}
.view-switch button[aria-pressed=true]{background:#c9af83;color:#142027;font-weight:700}
.room-caption{max-width:700px;margin:12px auto 0;text-align:center;font-size:12px;color:#a5b4b4;line-height:1.5}
.room-caption[hidden]{display:none}
.toggles{border:0;padding:0;margin:19px 0 0;display:flex;flex-wrap:wrap;gap:7px}
.toggles legend{padding:0;margin:0 0 8px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:#b6c6c4;font-weight:bold;width:100%}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:6px;border:1px solid #4b5d60;border-radius:16px;padding:7px 11px;font-size:11px;color:#b9c6c4;background:#10191d;line-height:1.2}
.chip span::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid #7c8f8f;flex:0 0 auto}
.chip input:checked+span{border-color:#c9af83;color:#f1ead9;background:#1e2c31}
.chip input:checked+span::before{background:#c9af83;border-color:#c9af83}
.chip input:focus-visible+span{outline:2px solid #d4c5a7;outline-offset:2px}
.chip input:disabled+span{opacity:.38;cursor:not-allowed;text-decoration:line-through;text-decoration-color:#ffffff40}
.chip input:disabled{cursor:not-allowed}
.chip.single{margin-top:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair label{display:flex;justify-content:space-between;margin:19px 0 8px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:#b6c6c4;font-weight:bold}
.editor input[type=range]:disabled{opacity:.35}
.quality{border-left:2px solid #c9af83;padding-left:10px}
.quality[hidden]{display:none}
.editor button.secondary{background:none;border:1px solid #c9af83;color:#e6d6b6;width:100%;min-height:46px;padding:12px 15px;display:flex;justify-content:space-between;font-weight:700;margin-top:14px;letter-spacing:.02em}
.editor button.secondary:disabled{opacity:.45;cursor:wait}
#wallSwatches .swatch{border-radius:4px}
@media(max-width:480px){.pair{grid-template-columns:1fr;gap:0}}
.editor>label.chip{display:inline-flex;margin:14px 0 0;text-transform:none;letter-spacing:normal;font-weight:normal;font-size:inherit;color:inherit}
.moment{margin-top:19px}.moment[hidden]{display:none}
.moment label{display:flex;justify-content:space-between;gap:10px;margin:0 0 8px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:#b6c6c4;font-weight:bold}
.moment output{color:#f1ead9;letter-spacing:.06em;font-weight:normal;text-align:right}
.moment-chart{display:block;width:100%;height:auto;background:#10191d;border:1px solid #33464a;border-bottom:0}
.moment-chart text{font:9px Arial,Helvetica,sans-serif;fill:#7f9392;letter-spacing:.06em}
.moment-grid{stroke:#2a3a3e;stroke-width:1}.moment-area{fill:#c9af8322}.moment-curve{fill:none;stroke:#c9af83;stroke-width:1.5}
.moment-landfall{fill:#10191d;stroke:#e9e7df;stroke-width:1.1}.moment-tick{stroke:#8ea2a1;stroke-width:1}.moment-tick.print{stroke:#c9af83;stroke-width:2}
.moment-cursor{stroke:#f1ead9;stroke-width:1}.moment-dot{fill:#c9af83;stroke:#10191d;stroke-width:2}
.moment input[type=range]{width:100%;accent-color:#c9af83;margin:8px 0 2px}
.moment-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.moment-preset{border:1px solid #4b5d60;border-radius:16px;padding:6px 10px;font-size:11px;color:#b9c6c4;background:#10191d;line-height:1.2}
.moment-preset[aria-pressed=true]{border-color:#c9af83;color:#f1ead9;background:#1e2c31}
.stage3d{position:relative;width:100%;aspect-ratio:1;background:#10191d;overflow:hidden;touch-action:none}.stage3d[hidden],#poster[hidden]{display:none}
.stage3d canvas{display:block;width:100%!important;height:100%!important}
.stage3d-note{position:absolute;left:10px;bottom:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a6bab8;background:#10191db3;padding:4px 8px;pointer-events:none}
.tools3d{max-width:700px;margin:12px auto 0;text-align:center}.tools3d[hidden]{display:none}
.tools3d button{border:1px solid #c9af83;background:none;color:#e6d6b6;border-radius:20px;padding:8px 16px;font-size:12px;font-weight:700;letter-spacing:.02em}
.tools3d button[aria-pressed=true]{background:#c9af83;color:#142027}
.tools3d p{font-size:12px;color:#a5b4b4;line-height:1.5;margin:10px 0 0}
.looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:6px}
.look-card{display:flex;flex-direction:column;gap:6px;padding:4px 4px 7px;border:1px solid #3b4c50;background:#10191d;color:#b9c6c4;font-size:10px;letter-spacing:.03em;line-height:1.2;text-align:center}
.look-card canvas{display:block;width:100%;height:auto;background:#1d2b31}
.look-card[aria-pressed=true]{border-color:#c9af83;box-shadow:0 0 0 1px #c9af83;color:#f1ead9}
.look-card[hidden]{display:none}
.tune{margin-top:30px;border-top:1px solid #3b4c50}
.tune summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:22px 0 6px}
.tune summary::-webkit-details-marker{display:none}
.tune summary span{font-family:Georgia,serif;font-size:21px;color:#f1eee5}
.tune summary::after{content:"+";grid-row:1/3;grid-column:2;font-size:22px;color:#c9af83;line-height:1}
.tune[open] summary::after{content:"\2212"}
.tune summary small{grid-column:1;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#8ea2a1}
.tune summary:focus-visible{outline:2px solid #d4c5a7;outline-offset:3px}
.tune-section{border-top:1px solid #2f4044;margin-top:20px}
.tune-section h3{font-family:Georgia,serif;font-weight:400;font-size:19px;margin:18px 0 0;color:#e9e7df}
.tune-section>label{display:flex;justify-content:space-between;margin:19px 0 8px;text-transform:uppercase;font-size:10px;letter-spacing:.15em;color:#b6c6c4;font-weight:bold}
.tune-section>label.chip{display:inline-flex;margin:14px 0 0;text-transform:none;letter-spacing:normal;font-weight:normal;font-size:inherit;color:inherit}
@media(max-width:480px){.looks{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.look-card{font-size:9px;padding:3px 3px 6px}}
.provenance{margin-top:14px}.provenance summary{cursor:pointer;font-size:12px;color:#c9af83;letter-spacing:.04em}.provenance .facts{margin-top:10px}
a.inline{color:#c9af83;border-bottom:1px solid #c9af8366}
.work-banner{border:1px solid #c9af83;background:#1e2c31;padding:14px 16px;margin:0 0 18px}.work-banner[hidden]{display:none}
.work-banner p{margin:8px 0 10px;display:flex;flex-direction:column;gap:3px}.work-banner strong{font-family:Georgia,serif;font-weight:400;font-size:20px;color:#f1eee5}.work-banner p span{font-size:10px;letter-spacing:.14em;color:#a6bab8}
.work-banner a{font-size:12px;color:#c9af83}
.composition-tools{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px}
.composition-tools button{border:1px solid #4b5d60;background:#10191d;color:#c8d2d0;border-radius:16px;padding:7px 12px;font-size:11px;letter-spacing:.03em}
.composition-tools button:disabled{opacity:.4;cursor:default}
.composition-tools #share{margin-left:auto;border-color:#c9af83;color:#e6d6b6}
body.from-work .intro{padding:34px 0 26px}body.from-work .intro h1,body.from-work .intro>p:last-child{display:none}
.storm-search{margin-bottom:8px}.storm-search.no-match{border-color:#b9675a!important}
.look-card.extra-look{display:none}.looks.all .look-card.extra-look{display:flex}.looks.all .look-card.extra-look[hidden]{display:none}
.more-looks{margin-top:8px;border:0;background:none;color:#c9af83;font-size:12px;padding:6px 0;letter-spacing:.03em}
.shrink-preview{display:none;border:1px solid #4b5d60;background:none;color:#a6bab8;border-radius:16px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px}
.chip span{font-size:12px;padding:8px 12px}.hint{font-size:13px}.editor>label,.tune-section>label,.toggles legend,.moment label{font-size:11px}
@media(max-width:850px){.preview-heading{justify-content:center}.shrink-preview{display:inline-block}body.small-preview .canvas-frame{width:min(calc(100vw - 40px),calc(15vh * var(--ratio)),calc(110px * max(1,var(--ratio))))}.chip span{min-height:38px}.moment-preset,.composition-tools button{min-height:36px}}