:root{--bg: #FFFCEE;--ink: #69243A;--muted: #9A8088;--line: #E8DFCC;--accent: #B7D9FF;--panel: #FFFCEE;font-family:Supreme,-apple-system,system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background-color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;padding:32px;height:100vh;width:100%}.editor{display:grid;grid-template-columns:240px 1fr 320px;grid-template-rows:1fr auto;grid-template-areas:"intro    canvas right" "credit   canvas right";gap:24px;flex:1;min-height:0}.intro-top-block{grid-area:intro;display:flex;flex-direction:column;gap:12px;color:#fffae3}.intro-top-block p{margin:0;line-height:1.4}.intro-credit-block{grid-area:credit;background:#b7d9ff;color:var(--ink);font-size:13px;font-weight:500;padding:14px 16px;border-radius:8px;align-self:end}.intro-credit-block p{margin:0;line-height:1.4}.intro-credit-block a{color:inherit;text-decoration:none}.intro-credit-block a:hover{text-decoration:underline}.right-panel{grid-area:right;min-height:0}details.tools-accordion{gap:0}.tools-accordion-body{display:flex;flex-direction:column;gap:16px}details.tools-accordion[open]>.tools-accordion-body{margin-top:16px}.intro-title{font-family:Array,Supreme,system-ui,sans-serif;font-weight:400;font-size:48px;line-height:.9;margin:0;letter-spacing:-.01em}.intro-tagline{font-size:16px}.canvas-wrap{grid-area:canvas;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:16px;overflow:hidden;min-width:0;min-height:0}.canvas-svg{background:#fff;border:1px solid var(--line);display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;overflow-x:hidden;overflow-wrap:break-word;min-width:0;scrollbar-width:none}.panel::-webkit-scrollbar{display:none}.panel h2{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}.panel section{display:flex;flex-direction:column;gap:6px}.panel label{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}.panel input[type=range]{width:100%}.panel input[type=text],.panel input[type=color],.panel select{font:inherit;border:1px solid var(--line);background:#fff;padding:6px 8px;border-radius:4px;color:var(--ink)}.panel input[type=color]{padding:2px;height:32px}.glyph-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.glyph-btn{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;padding:6px;display:grid;place-items:center}.glyph-btn.active{border-color:var(--accent);border-width:2px}.glyph-btn svg{width:100%;height:100%}.btn-row{display:flex;gap:6px;flex-wrap:wrap}button{font:inherit;border:1px solid var(--ink);background:var(--ink);padding:6px 10px;border-radius:4px;cursor:pointer;color:var(--bg)}button:hover{box-shadow:0 0 0 2px var(--accent)}button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-group{display:inline-flex;align-self:flex-start;border:1px solid var(--ink);border-radius:4px;overflow:hidden}.btn-group button{border:none;border-right:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);padding:6px 14px}.btn-group button:last-child{border-right:none}.btn-group button:hover{box-shadow:none;background:#69243a14}.btn-group button.active,.btn-group button.active:hover{background:var(--ink);color:var(--bg);box-shadow:none}.glyph-btn{background:#fff;color:var(--ink);border-color:var(--line)}.glyph-btn:hover{background:#fff;box-shadow:none;border-color:var(--accent)}.panel label.toggle{display:flex;align-items:center;justify-content:flex-start;gap:6px;cursor:pointer;font-size:13px}.panel label.toggle input[type=checkbox]{margin:0}.saved-list{display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto;font-size:12px}.saved-item{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:#fff}.saved-item button{padding:2px 6px;font-size:11px}.divider{height:1px;background:#69243a2e;margin:4px 0}.reference-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;border:1px solid var(--line);border-radius:3px;background:#fff;font-size:12px}.reference-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.reference-row button{padding:2px 8px;font-size:14px;line-height:1}.tools-block,.saveload-block{min-height:0}@media (max-width: 768px){html,body,#root{height:auto;overflow:visible}.app{padding:16px;height:auto;min-height:100vh}.editor{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;grid-template-areas:"intro" "tools" "saveload" "canvas" "credit";gap:16px;flex:none}.tools-block{grid-area:tools}.saveload-block{grid-area:saveload}.intro-title{font-size:36px}.canvas-wrap{aspect-ratio:1 / 1;height:auto;min-height:0}.intro-credit-block{background:transparent;color:#fffae3;padding:0;align-self:stretch}.tools-accordion>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.tools-accordion>summary::-webkit-details-marker{display:none}.glyph-grid{grid-template-columns:repeat(auto-fill,minmax(40px,56px));justify-content:start}.glyph-btn{max-width:56px;max-height:56px}}.accordion-chevron{color:var(--ink);transition:transform .15s ease}.tools-accordion[open]>summary .accordion-chevron{transform:rotate(180deg)}
