@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap";:root{color:#33281d;font-synthesis:none;text-rendering:optimizelegibility;background:#f6f2e9;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(at 52% 44%,#ffffffd4,#f7f3ebb8 43%,#f2ece0e6);min-width:320px;min-height:100vh;margin:0;overflow-x:clip}body:before{content:"";pointer-events:none;opacity:.17;mix-blend-mode:multiply;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");position:fixed;inset:0}button,input{font:inherit}#app{max-width:1600px;min-height:100vh;margin:auto;padding:0 6.2vw;position:relative}.topbar{z-index:3;border-bottom:1px solid #644e3021;justify-content:space-between;align-items:center;height:66px;display:flex;position:relative}.wordmark{color:#42321f;letter-spacing:-.2px;align-items:center;gap:8px;font-family:Playfair Display,serif;font-size:13px;line-height:12px;text-decoration:none;display:flex}.wordmark b{color:#b8753c;font-weight:600}.wordmark-mark{color:#b8753c;border:1px solid #ba8656;border-radius:50%;place-items:center;width:28px;height:28px;font:italic 22px Playfair Display,serif;display:grid}.edition,.eyebrow,.stage-label,.orbit-note,.drag-hint,.bottom-caption,.control-index{letter-spacing:1.5px;font:9px DM Mono,monospace}.edition{color:#907d63;align-items:center;gap:10px;display:flex}.edition i{background:#c99759;border-radius:50%;width:4px;height:4px}.sound-button{color:#96734d;cursor:pointer;background:0 0;border:1px solid #78583445;border-radius:50%;width:33px;height:33px;font-size:16px;transition:all .2s;transform:rotate(45deg)}.sound-button:hover,.sound-button.active{color:#fff8ed;background:#b8783f;border-color:#b8783f}.showcase{grid-template-columns:minmax(0,1fr) minmax(210px,.31fr);align-items:center;column-gap:3vw;height:calc(100vh - 66px);min-height:600px;max-height:900px;display:grid;position:relative}.intro{z-index:2;align-self:center;padding-bottom:20px}.eyebrow{color:#aa8159;letter-spacing:1.45px;align-items:center;gap:9px;font-size:8px;display:flex}.eyebrow i{background:#d49a58;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #d49a5824}h1{letter-spacing:-1.8px;color:#433425;margin:23px 0 14px;font:500 clamp(33px,3.8vw,57px)/1.12 Playfair Display,serif}h1 em{color:#b87a43;font-weight:500}.intro p{color:#857764;max-width:245px;margin:0;font-size:12px;line-height:1.85}.material-note{color:#9b896f;align-items:center;gap:10px;margin-top:45px;font-size:9px;line-height:1.6;display:flex}.material-note b{color:#67563f;font-weight:500}.paper-swatch{background:#fff8e9;border:1px solid #72532d2e;width:28px;height:34px;transform:rotate(-5deg);box-shadow:2px 2px #dfc58e,4px 4px #f6e8c2}.art-stage{place-items:center;width:100%;height:min(82vh,760px);min-height:520px;display:grid;position:relative}#scene{z-index:1;touch-action:none;width:100%;height:100%;position:relative}#scene canvas{cursor:grab;touch-action:none;outline:none;width:100%;height:100%;display:block}#scene canvas.dragging{cursor:grabbing}.stage-glow{aspect-ratio:1;background:radial-gradient(circle,#e6ca9433,#f8f1de1a 43%,#0000 72%);border-radius:50%;width:74%;position:absolute}.stage-shadow{z-index:0;filter:blur(13px);background:radial-gradient(#5b401e2b,#0000 68%);border-radius:50%;width:50%;height:9%;position:absolute;bottom:10%;left:25%}.stage-label{z-index:2;color:#9c8768;align-items:center;gap:11px;font-size:8px;display:flex;position:absolute;top:5%;left:4%}.label-line{background:#d4c1a2;width:27px;height:1px}.stage-label span:last-child{color:#bf9564}.orbit-note{z-index:2;color:#b19c7d;letter-spacing:1.3px;writing-mode:vertical-rl;font-size:7px;position:absolute}.note-top{top:15%;right:0;transform:rotate(180deg)}.note-bottom{writing-mode:initial;align-items:center;gap:9px;display:flex;bottom:16%;left:1%}.mini-star{color:#c99759;font-size:13px}.drag-hint{z-index:2;white-space:nowrap;color:#9e896b;letter-spacing:1.4px;align-items:center;gap:9px;font-size:8px;display:flex;position:absolute;bottom:6%;left:50%;transform:translate(-50%)}.hint-icon{color:#c08d56;font-size:16px}.placeholder-tag{z-index:2;color:#a78c6a;letter-spacing:.7px;pointer-events:none;white-space:nowrap;background:#f9f5ecd6;padding:4px 7px;font:7px DM Mono,monospace;position:absolute;bottom:13%;left:50%;transform:translate(-50%)}.controls{color:#6c5c47;border-left:1px solid #8f734d38;justify-self:end;width:100%;max-width:230px;padding:10px 0 9px 25px}.control-heading{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.control-heading .eyebrow{font-size:8px}.control-index{letter-spacing:.8px;color:#b9a68b;font-size:7px}.number-label{color:#97866f;margin-bottom:8px;font-size:10px;display:block}.number-input-wrap{border-bottom:1px solid #c8b99f;align-items:center;gap:9px;height:44px;display:flex;position:relative}.number-input-wrap select{appearance:none;color:#4a3724;cursor:pointer;background:0 0;border:0;outline:none;padding:0}.number-input-wrap select:first-child{width:60px;font:30px Playfair Display,serif}.number-input-wrap select:last-child{color:#ab8b62;letter-spacing:1.4px;margin-top:7px;font:9px DM Mono,monospace}.number-input-wrap>span:nth-child(2){color:#ab8b62;letter-spacing:1.7px;margin-top:7px;font:9px DM Mono,monospace}.input-arrow{color:#bb8b59;margin-left:auto;font-size:17px;transform:rotate(45deg)}.month-chips{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:5px 0 14px;display:grid}.month-chip{color:#937b5d;cursor:pointer;touch-action:manipulation;background:#fffcf47a;border:1px solid #a0805538;border-radius:3px;min-height:31px;padding:0;font:11px DM Mono,monospace}.month-chip.active{color:#684523;background:#eddab5;border-color:#ba8044;box-shadow:inset 0 0 0 1px #ba804433}.unit-toggle{grid-template-columns:1fr 1fr;gap:5px;margin:-2px 0 14px;display:grid}.unit-button{color:#927a5d;text-transform:uppercase;letter-spacing:1px;cursor:pointer;touch-action:manipulation;background:0 0;border:1px solid #a0805542;border-radius:3px;min-height:38px;font:9px DM Mono,monospace}.unit-button.active{color:#754d2d;background:#efe0c3;border-color:#b9824c;box-shadow:inset 0 0 0 1px #b9824c2e}.style-select{color:#806a4e;background:#fffcf48f;border:1px solid #a080553b;border-radius:2px;outline-color:#c89156;width:100%;height:34px;margin:-2px 0 13px;padding:0 9px;font-size:10px}.swatch-grid{gap:7px;margin:-6px 0 16px;display:grid}.number-swatches{grid-template-columns:repeat(5,minmax(0,1fr))}.paper-swatches{grid-template-columns:repeat(6,minmax(0,1fr))}.swatch-button{background:var(--swatch);cursor:pointer;touch-action:manipulation;border:1px solid #674c2f33;border-radius:4px;min-width:0;min-height:35px;position:relative}.swatch-button:after{content:"";pointer-events:none;border:1px solid #ffffff6b;border-radius:2px;position:absolute;inset:3px}.swatch-button.active{outline-offset:2px;outline:2px solid #987047}.upload-button{color:#8e7657;cursor:pointer;border:1px dashed #a0805561;border-radius:2px;justify-content:space-between;align-items:center;width:100%;min-height:34px;margin:-2px 0 6px;padding:0 9px;font-size:9px;display:flex;overflow:hidden}.upload-button span:first-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.upload-button span:last-child{color:#b57e4b;margin-left:7px;font-size:16px}.art-choice{margin-bottom:12px}.art-choice-heading{justify-content:space-between;align-items:center;margin-bottom:5px;display:flex}.art-choice-heading .number-label{margin:0}.restore-art-button{color:#ad7745;cursor:pointer;background:0 0;border:0;padding:3px 5px;font-size:9px}.restore-art-button[hidden]{display:none}.visually-hidden{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.clear-art-button{color:#a17a51;cursor:pointer;background:0 0;border:0;padding:5px 0 10px;font-size:9px;text-decoration:underline}.clear-art-button[hidden]{display:none}.controls button:focus-visible,.controls select:focus-visible,.upload-button:focus-visible{outline-offset:2px;outline:2px solid #a6713e}.control-divider{background:#8f734d2e;height:1px;margin:0 0 25px}.tilt-row{color:#97866f;justify-content:space-between;font-size:10px;display:flex}.tilt-row output{color:#ad7745;font:10px DM Mono,monospace}.tilt-meter{background:#e6ddce;height:2px;margin-top:11px;overflow:hidden}.tilt-meter span{background:#c08d56;width:0;height:100%;transition:width .1s linear;display:block}.reset-button{color:#8e7657;cursor:pointer;text-align:left;background:0 0;border:0;border-bottom:1px solid #8f734d2e;justify-content:space-between;width:100%;margin-top:8px;padding:14px 0;font-size:10px;display:flex}.reset-button span:last-child{color:#b57e4b;font-size:15px}.reset-button:hover{color:#aa6b38}.control-footnote{color:#aa9a81;margin:17px 0 0;font-size:9px;line-height:1.8}.bottom-caption{color:#a28e70;letter-spacing:1.35px;align-items:center;gap:10px;font-size:7px;display:flex;position:absolute;bottom:20px;left:0}.bottom-caption span:first-child{color:#c18f58}.caption-line{background:#d4c3a8;width:28px;height:1px}@media (width>=1350px){#app{padding-left:8vw;padding-right:8vw}.showcase{column-gap:4vw}}@media (width<=900px){#app{padding:0 5vw}.showcase{grid-template-columns:minmax(0,1fr) minmax(180px,.4fr);column-gap:3vw}.controls{max-width:185px;padding-left:17px}.art-stage{height:min(76vh,680px)}}@media (width<=600px){#app{padding:0 16px}.topbar{z-index:8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f6f2e9f5;height:54px;position:sticky;top:0}.edition{letter-spacing:1px;font-size:7px}.showcase{height:auto;min-height:unset;flex-direction:column;align-items:stretch;max-height:none;padding:0 0 24px;display:flex}.art-stage{z-index:6;background:linear-gradient(#f6f2e9 0%,#f6f2e9fa 85%,#f6f2e9eb 100%);border-bottom:1px solid #8f734d24;flex:none;order:1;width:calc(100% + 32px);height:clamp(315px,46svh,390px);min-height:315px;margin:0 -16px;padding:0 16px;position:sticky;top:54px;overflow:hidden;box-shadow:0 10px 20px #4d392012}.stage-glow{background:radial-gradient(circle,#e6ca944d,#f8f1de24 50%,#0000 76%);width:88%}.stage-shadow{width:60%;height:10%;bottom:8%;left:20%}.stage-label{gap:8px;font-size:7px;top:11px;left:18px}.note-top,.note-bottom{display:none}.drag-hint{letter-spacing:1px;font-size:7px;bottom:9px}.placeholder-tag{bottom:28px}.controls{z-index:1;background:#fffcf6d1;border:1px solid #8f734d29;border-radius:16px;flex-direction:column;order:2;align-self:auto;width:100%;max-width:none;margin:10px 0 0;padding:15px 14px 18px;display:flex;position:relative;box-shadow:0 5px 18px #4d392009}.control-heading{margin:0 0 10px}.control-heading .eyebrow{font-size:8px}.control-index{font-size:7px}.number-label{margin:0 0 4px;font-size:10px}.number-input-wrap{height:38px;min-height:38px;margin-bottom:5px}.number-input-wrap select:first-child{width:100%;min-height:36px;font-size:25px}.month-chips{gap:4px;margin:2px 0 10px}.month-chip{border-radius:5px;min-height:32px;font-size:10px}.unit-toggle{gap:6px;margin:0 0 12px}.unit-button{border-radius:6px;min-height:34px;font-size:8px}.style-choice{justify-content:space-between;align-items:center;gap:8px;margin:0 0 6px;display:flex}.style-choice .number-label{margin:0}.style-select{border-radius:6px;width:auto;min-width:48%;max-width:58%;height:31px;margin:0;padding:0 6px;font-size:9px}.swatch-grid{gap:6px;margin:0 0 11px}.swatch-button{border-radius:6px;min-height:30px}.swatch-button:after{inset:2px}.swatch-button.active{outline-offset:1px;outline-width:1.5px}.art-choice{margin-bottom:8px}.art-choice-heading{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.art-choice-heading .number-label{margin:0}.restore-art-button{color:#ad7745;cursor:pointer;background:0 0;border:0;padding:2px 4px;font-size:8px}.restore-art-button[hidden]{display:none}.upload-button{border-radius:6px;min-height:34px;margin:0;padding:0 8px;font-size:9px}.control-divider{margin:0 0 13px}.tilt-row{font-size:10px}.tilt-meter{height:3px;margin-top:7px}.reset-button{min-height:40px;margin-top:5px;padding:10px 0;font-size:10px}.control-footnote{margin-top:7px;font-size:8px;line-height:1.45}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}