:root{--ink:#17241e;--paper:#f3f1e9;--cream:#fffdfa;--green:#24634d;--coral:#f4775f;--line:#d9d5c9;--muted:#69736d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 ui-rounded,"Avenir Next",system-ui,sans-serif}.topbar{position:sticky;top:0;z-index:20;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1080px)/2));background:#fffc;border-bottom:1px solid var(--line);box-shadow:0 4px 18px #17241e09}.brand{font:800 23px/1 Georgia,serif;text-decoration:none;color:var(--ink);letter-spacing:-.06em}.brand>span:last-child{color:var(--green)}.crest{display:inline-grid;place-items:center;width:27px;height:27px;margin-right:7px;border-radius:50%;background:var(--green);color:#fff;font:16px/1 sans-serif;letter-spacing:0}.menu-button,.icon-button{border:1px solid var(--line);background:#fffdfa;color:var(--ink);cursor:pointer}.menu-button{width:42px;height:42px;border-radius:13px;font-size:22px}.menu{position:fixed;top:60px;right:16px;display:none;min-width:210px;padding:10px;background:#fffdfa;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 46px #17241e30}.menu.open{display:grid}.menu a,.menu-publish{padding:11px 10px;color:var(--ink);text-align:left;text-decoration:none;background:transparent;border:0;font:700 14px ui-rounded,system-ui;cursor:pointer}.menu a:hover,.menu-publish:hover{background:#edf1e9;border-radius:9px}.studio{min-height:calc(100dvh - 66px);padding:18px max(14px,calc((100vw - 1050px)/2)) 110px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 82% 13%,#d8ecab80,transparent 23rem),radial-gradient(circle at 15% 85%,#f9c7a777,transparent 20rem)}.studio-head{display:flex;align-items:center;justify-content:space-between;width:min(720px,100%);gap:14px;margin:4px 0 13px}.character-button{display:flex;gap:9px;align-items:center;border:0;background:transparent;color:var(--ink);cursor:pointer;padding:0;text-align:left}.character-button span{display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:var(--green);color:#fff;font:700 25px Georgia,serif}.character-button small{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}#progressText{margin:0;text-align:right;font-size:12px;font-weight:700;color:var(--muted)}.letter-drawer{display:none;width:min(720px,100%);padding:12px;margin-bottom:10px;background:#fffdfa;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px #17241e12}.letter-drawer.open{display:block}.characters{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}.characters button{min-height:38px;border:1px solid var(--line);background:#fff;border-radius:9px;font:700 15px Georgia,serif;color:var(--ink);cursor:pointer;position:relative}.characters button.active{background:var(--green);color:white;border-color:var(--green)}.characters button.done:after{content:'•';color:var(--coral);font:700 23px/0 Arial;position:absolute;right:2px;top:2px}.canvas-stage{position:relative;width:min(620px,100%);margin:auto}.guide-note{text-align:center;margin:0 0 7px;color:var(--muted);font-size:11px;font-weight:700}.canvas-wrap{position:relative;width:100%;aspect-ratio:620/820;border:2px solid #c6bb9c;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 18px 46px #17241e23;touch-action:none}.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%}.bottom-dock{position:fixed;z-index:15;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(640px,calc(100vw - 24px));height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:10px 11px;background:#e6e8e3;border:1px solid #cbd0c6;border-radius:23px;overflow:visible;box-shadow:0 14px 36px #17241e28}.progress-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:22px;background:linear-gradient(90deg,#b6dca0,#65b88d);opacity:.75;transition:width .4s}.dock-left,.dock-center{position:relative;z-index:1;display:flex;gap:7px}.dock-center{justify-content:center}.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:25px;line-height:1}.icon-button:disabled{opacity:.34;cursor:not-allowed}.next-button{position:relative;z-index:1;justify-self:end;border:0;background:var(--green);color:white;border-radius:14px;padding:13px 14px;font:800 13px ui-rounded,system-ui;cursor:pointer;box-shadow:0 4px 0 #174333}.next-button:disabled{background:#aab4ad;box-shadow:none;cursor:not-allowed}.next-button span{font-size:18px;vertical-align:-1px}.settings{position:absolute;bottom:54px;left:0;display:none;width:270px;padding:15px;background:#fffdfa;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 42px #17241e2b}.settings.open{display:grid;gap:13px}.settings label,.setting-row{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:800}.settings input{accent-color:var(--green)}.setting-row{grid-template-columns:auto repeat(4,1fr);align-items:center}.setting-row span{grid-column:1/-1}.swatch,.choice{height:30px;border:2px solid transparent;background:var(--swatch);border-radius:50%;cursor:pointer}.swatch.active{outline:2px solid var(--green);outline-offset:2px}.choice{border-radius:9px;background:#edf0e9;color:var(--ink);font:700 11px ui-rounded,system-ui}.choice.active{background:var(--green);color:#fff}.preview{display:none;padding:48px 20px;background:var(--ink);color:#f9f8f1;text-align:center}.preview.show{display:block}.preview #fontPreview{display:block;width:min(1100px,100%);height:auto;margin:0 auto 10px;background:#f9f8f10a;border-radius:18px}.preview p:not(.eyebrow){color:#c7d3ca;font-size:13px;margin:0 0 16px}.eyebrow{font-weight:800;font-size:11px;letter-spacing:.16em;color:var(--green);margin:0 0 12px}.text-btn,.soft{border:0;cursor:pointer;font:700 14px ui-rounded,system-ui}.text-btn{background:transparent;color:var(--green);text-decoration:underline;padding:6px}.soft{background:#eef0e9;border:1px solid var(--line);color:var(--ink);padding:13px 15px;border-radius:999px}.button{display:inline-flex;gap:11px;align-items:center;background:var(--green);color:white;padding:14px 18px;border-radius:999px;border:0;text-decoration:none;font:700 14px ui-rounded,system-ui}.gallery{padding:100px max(20px,calc((100vw - 1080px)/2))}.gallery h2{font:700 clamp(42px,6vw,72px)/.9 Georgia,serif;letter-spacing:-.075em;margin:0}.gallery>p:not(.eyebrow){color:var(--muted);max-width:500px}.font-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-top:32px}.font-card{background:#fffdfa;border:1px solid var(--line);border-radius:20px;padding:21px}.font-card h3{font:700 30px/1 Georgia,serif;margin:7px 0}.font-card p{color:var(--muted);font-size:13px}.font-sample{font:42px/1.1 Arial,sans-serif;letter-spacing:-.04em;overflow:hidden;white-space:nowrap;margin:22px 0}.card-actions{display:flex;gap:8px;align-items:center}.card-actions a{margin-left:auto}.stars button{border:0;background:transparent;color:#f2ae3d;font-size:20px;padding:0;cursor:pointer}dialog{border:0;border-radius:24px;padding:0;max-width:430px;width:calc(100% - 30px);box-shadow:0 25px 80px #0005}dialog::backdrop{background:#17241eaa}dialog form{padding:30px;position:relative}dialog h2{font:700 36px/1 Georgia,serif;margin:0 0 22px}dialog label{display:block;font-size:13px;font-weight:800}dialog input{width:100%;font:700 20px/1.2 Georgia,serif;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);padding:8px 0;margin:7px 0 14px}.close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:28px;cursor:pointer}.dialog-note{font-size:13px;color:var(--muted)}dialog form>div{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}@media(max-width:520px){.topbar{padding:0 14px}.studio{padding:12px 10px 100px}.studio-head{padding:0 3px}.character-button small{display:none}#progressText{max-width:190px}.characters{grid-template-columns:repeat(9,1fr)}.bottom-dock{height:66px;width:calc(100vw - 18px);padding:8px}.icon-button{width:42px;height:42px}.next-button{padding:12px 10px}.settings{left:-2px;width:min(280px,calc(100vw - 24px))}.guide-note{font-size:10px}}@media(min-width:760px){.topbar{padding-left:max(26px,calc((100vw - 1120px)/2));padding-right:max(26px,calc((100vw - 1120px)/2))}.studio{padding-top:26px}.bottom-dock{width:640px}}