:root{font-family:Arial,Helvetica,sans-serif;color:#292e2c;background:#dddeda;font-synthesis:none;--line:rgba(54,60,54,.16);--ink:#2d3531;--sage:#607566;--gold:#bfad8b;--muted:#647069}*{box-sizing:border-box}body{margin:0;min-height:100dvh}.scene{position:fixed;inset:0;background:linear-gradient(90deg,#e9e8e3d9,#dedfdbc4),url(assets/scene.png) center/cover;z-index:-1}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.42}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #877449;outline-offset:3px}button{touch-action:manipulation}button,input{border-radius:10px}button{transition:background .16s,border-color .16s,box-shadow .16s}button:hover:not(:disabled){filter:brightness(.97)}[hidden]{display:none!important}.header{height:108px;display:flex;align-items:center;gap:30px;max-width:1450px;margin:auto;padding:20px 36px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:18px}.brand img{width:53px;height:48px;object-fit:contain;mix-blend-mode:multiply}.eyebrow{font-size:9px;font-weight:600;letter-spacing:.2em;color:var(--muted)}h1{font-size:26px;font-weight:400;letter-spacing:.13em;margin:8px 0 0}h2{font-family:Georgia,serif;font-size:27px;font-weight:400;margin:8px 0 0}.edition{font-size:11px;letter-spacing:.06em;margin-left:auto;color:#555e58;display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;border-radius:50%;background:#768f7a}.quiet{border:1px solid var(--line);background:#ffffff42;padding:9px 13px;font-size:11px}.studio{display:grid;grid-template-columns:430px minmax(400px,1fr);grid-template-areas:'editor viewer';gap:24px;max-width:1330px;margin:24px auto 14px;padding:0 24px;align-items:start}.viewer{grid-area:viewer;background:#f4f3ee8c;border:1px solid #fff8;border-radius:16px;padding:14px 16px 0;box-shadow:0 10px 45px #3b453809}.viewer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.chips{display:flex;gap:6px}.chips span{padding:7px 9px;border:1px solid var(--line);border-radius:20px;font-size:10px;color:#556058}.stage{height:min(66vh,760px);min-height:420px;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:5px;background:#cfd0cc60}.stage canvas{display:block;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}.view-tag{position:absolute;top:12px;left:12px;font-size:9px;letter-spacing:.16em;background:#f5f3efdc;padding:8px 10px;border-radius:5px;pointer-events:none}#loading{position:absolute;inset:0;background:#eeeee8;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;font-size:13px}.view-switch{display:grid;grid-template-columns:repeat(3,1fr);max-width:360px;margin:14px auto 8px;border:1px solid var(--line);border-radius:10px;padding:3px;background:#fff5;gap:3px}.view-switch button{border:0;background:transparent;font-size:12px;padding:9px 0}.view-switch button[aria-pressed=true]{background:#39483e;color:#fff;box-shadow:0 2px 5px #1b201512}.summary{min-height:39px;padding:7px 0 12px;text-align:center;font-size:11px;line-height:1.5;color:#5f655d}.editor{grid-area:editor;padding:26px 24px 18px;background:linear-gradient(125deg,#f7f7f0d9,#dde2d9b3);border:1px solid #fff9;border-radius:16px;box-shadow:0 12px 40px #27352108}.editor-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.reset{width:35px;height:35px;border:1px solid var(--line);background:#fff5;font-size:24px;font-weight:300;line-height:1}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-bottom:1px solid var(--line);margin-bottom:23px}.tabs button{border:0;border-radius:0;background:transparent;padding:12px 2px;color:#737d74;font-size:11px;position:relative}.tabs button[aria-pressed=true]{color:#283e30;font-weight:600}.tabs button[aria-pressed=true]:after{content:'';position:absolute;bottom:-1px;height:2px;background:#526f58;left:8px;right:8px}.panels{min-height:223px}.panel h3,.section-label h3{font-size:12px;font-weight:500;margin:0 0 13px}.choices{display:grid;gap:7px}.pattern-choices{grid-template-columns:repeat(5,1fr)}.choice{border:1px solid var(--line);background:#ffffff30;min-height:46px;padding:10px 5px;font-size:11px}.choice[aria-pressed=true]{border-color:#94a382;background:linear-gradient(120deg,#f6ffeb,#d3e1c7);color:#263c2a;box-shadow:inset 0 0 12px #eeffdbe6,0 0 13px #a8c08a42}.choice b{font-size:13px;font-weight:500;display:block}.choice small{display:block;font-size:9px;color:#6f766b;margin-top:6px}.choice svg{display:block;width:100%;height:43px;margin-bottom:7px}.pattern-choices .choice{font-size:9px;padding:10px 2px}.zig-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:20px;padding-top:17px}.zig-row b{font-size:12px;font-weight:500}.zig-row p{font-size:10px;color:#6d756b;margin:7px 0 0}.toggle{height:26px;width:46px;border:1px solid #9ca69a;background:#bdc4b8;border-radius:18px;padding:3px}.toggle span{display:block;width:18px;height:18px;background:white;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .2s}.toggle[aria-checked=true]{background:#668367;border-color:#668367}.toggle[aria-checked=true] span{transform:translateX(19px);background:#f6ffe9}.origins{grid-template-columns:repeat(5,1fr)}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}.two{grid-template-columns:repeat(2,1fr)}.second-heading{margin-top:20px!important}.hint{font-size:11px;line-height:1.6;color:#6b756b;margin:13px 0 0}.scale{font-size:10px;border-top:1px solid var(--line);margin-top:18px;padding-top:14px}.scale summary{cursor:pointer}.scale summary span{float:right}.scale p{line-height:1.5;color:#70786d}.scale-inputs{display:flex;gap:12px}.scale-inputs label{display:block;line-height:1.9;flex:1}.scale input{display:inline-block;width:50px;border:1px solid var(--line);background:#fff8;padding:5px;margin-left:3px;font-size:12px}.tone-name{font-size:12px;margin:14px 0 0;color:#746141}.generate{width:100%;border:1px solid #495a49;background:linear-gradient(120deg,#53694f,#374d3f);color:#f5faed;display:flex;justify-content:space-between;padding:16px 19px;font-size:13px;box-shadow:inset 0 1px #b0c5a34d;margin-top:14px}.generate span{font-size:16px}.status{text-align:center;min-height:25px;font-size:10px;line-height:1.5;color:#73806f;margin:9px 0 16px}.error{background:#f6ece0;color:#7a422d;border:1px solid #c19b7a;padding:12px;font-size:11px;line-height:1.5;margin-bottom:12px}.section-label{display:flex;align-items:center;justify-content:space-between;gap:6px}.section-label h3{margin:0}.text-button{border:0;background:transparent;padding:6px 0;font-size:10px;color:#637260}.examples{border-top:1px solid var(--line);padding-top:16px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}.preset{border:1px solid var(--line);background:#ffffff32;padding:11px;text-align:left}.preset b{font-size:11px;font-weight:500;display:block;margin-bottom:5px}.preset small{font-size:9px;line-height:1.5;color:#778070;display:block}.preset[aria-pressed=true]{border-color:#9fae92;background:#edf3e6}.tools{display:flex;justify-content:space-between;gap:4px;margin:19px -3px 0;border-top:1px solid var(--line);padding-top:12px}.tools button{border:0;background:transparent;font-size:10px;padding:7px 4px}.save-note{font-size:9px;color:#8a8e83;margin:8px 0 0;text-align:center}footer{max-width:1120px;margin:15px auto 20px;text-align:center;font-size:10px;color:#7a8176;line-height:1.7;padding:0 24px}dialog{border:1px solid #fff8;background:#f0f1eb;color:var(--ink);border-radius:16px;padding:24px;width:min(1200px,94vw);max-height:92dvh;box-shadow:0 20px 70px #0004}dialog::backdrop{background:#17231dcc;backdrop-filter:blur(8px)}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.modal-head h2{font-size:24px;margin:0}.reference{width:100%;height:auto;display:block;border-radius:7px;border:1px solid var(--line);margin:12px 0 25px}.modal-copy{font-size:12px;color:#6a736a;line-height:1.8}.enlarged{display:block;max-width:100%;max-height:74dvh;width:auto;margin:auto}.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.case{background:#fff6;border:1px solid var(--line);text-align:left;padding:14px}.case .num{color:#92a086;font-size:10px;letter-spacing:.1em}.case b{font-size:13px;font-weight:500;display:block;margin:9px 0}.case small{color:#77806f;font-size:10px;line-height:1.7}.case svg{float:right;width:60px;height:45px}.close-row{margin-top:18px;text-align:center}
@media(min-width:1500px){.studio{max-width:1400px;grid-template-columns:470px 1fr}.editor{padding:30px}.stage{height:73vh}}@media(max-width:1050px) and (min-width:701px){.studio{grid-template-columns:340px 1fr;gap:15px;padding:0 18px}.editor{padding:20px 15px}.pattern-choices .choice{font-size:8px}.stage{min-height:540px}.chips span{font-size:9px;padding:6px}.viewer{padding:10px}.header{padding:18px 24px}.edition .version{display:none}.case-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.header{height:64px;padding:9px 16px;gap:10px}.brand{gap:9px}.brand img{width:30px;height:30px}.brand .eyebrow{font-size:6px;letter-spacing:.15em}h1{font-size:16px;margin-top:5px;letter-spacing:.10em}.edition{font-size:9px;gap:5px}.edition .version{display:none}.header>.quiet{font-size:9px;padding:8px}.studio{display:flex;flex-direction:column;margin:12px auto 0;padding:0 12px;gap:12px}.viewer{width:100%;padding:9px 10px 0;border-radius:12px}.viewer-head{margin-bottom:8px}.chips span{font-size:9px;padding:5px 8px}.viewer-head .quiet{font-size:9px;padding:5px 8px}.stage{height:43dvh;min-height:280px;max-height:450px}.view-tag{font-size:7px;padding:6px;top:7px;left:7px}.view-switch{margin:9px auto 3px;max-width:300px}.view-switch button{font-size:10px;padding:7px}.summary{font-size:9px;min-height:30px;padding:5px 0 8px}.editor{width:100%;padding:16px 14px 12px;border-radius:12px}.editor-title{margin-bottom:12px}.editor-title .eyebrow{font-size:7px}h2{font-size:21px;margin-top:5px}.reset{width:29px;height:29px;font-size:21px}.tabs{margin-bottom:15px}.tabs button{font-size:11px;padding:10px 0}.panels{min-height:175px}.panel h3{font-size:11px;margin-bottom:10px}.choice{padding:8px 4px;min-height:40px}.choice svg{height:34px;margin-bottom:5px}.pattern-choices .choice{font-size:9px}.zig-row{margin-top:12px;padding-top:12px}.hint{font-size:10px;margin-top:9px}.second-heading{margin-top:12px!important}.scale{margin-top:12px;padding-top:10px}.generate{padding:13px 17px;margin-top:10px}.status{margin:6px 0 10px;min-height:16px;font-size:9px}.examples{padding-top:12px}.preset{padding:10px}.tools{margin-top:12px;padding-top:8px}footer{font-size:9px;margin:13px auto;max-width:420px;padding:0 18px}dialog{padding:17px}.modal-head h2{font-size:21px}.case-grid{grid-template-columns:1fr 1fr}.case{padding:10px}.case b{font-size:11px}.case small{font-size:9px}.case svg{width:43px;height:35px}.modal-copy{font-size:11px}.reference{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:420px){.header .edition{display:none}.header>.quiet{margin-left:auto}}

.zig-section{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}.zig-section .choice{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px}.zig-section .choice svg{width:48px;height:38px;margin:0}.zig-section .choice b{font-size:12px}.zig-section .choice[aria-pressed=true]{border:2px solid #69815b;background:linear-gradient(120deg,#f6ffdf,#c9ddb8);box-shadow:0 0 15px #a8c08a68,inset 0 0 12px #f5ffed}