:root{--bg:#ECEFF3;--panel:#FFFFFF;--ink:#16202B;--sub:#5B6B7A;--line:#D7DEE6;--accent:#FFC400;--accent-ink:#3D3000;--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Yu Gothic UI,Noto Sans JP,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden}header{background:var(--panel);flex:0 0 auto}.head-in{display:flex;align-items:center;gap:18px;padding:14px 20px 12px}.logo{display:flex;align-items:baseline;gap:10px}.logo b{font-size:21px;font-weight:900;letter-spacing:.06em}.logo span{font-size:11.5px;color:var(--sub)}.ruler{height:14px;background:var(--accent);position:relative;overflow:hidden}.ruler:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(90deg,var(--accent-ink) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,var(--accent-ink) 0 1.5px,transparent 1.5px 50px);background-size:auto 6px,auto 11px;background-position:bottom left;background-repeat:repeat-x;opacity:.85}main{flex:1 1 auto;display:flex;min-height:0}aside{width:320px;flex:0 0 auto;background:var(--panel);border-right:1px solid var(--line);padding:18px;overflow-y:auto}.stage-wrap{flex:1 1 auto;position:relative;min-width:0}canvas{display:block}h2{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--sub);margin:18px 0 8px}h2:first-child{margin-top:2px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid var(--line);background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:9px;cursor:pointer;font-family:inherit;line-height:1.2}.chip small{display:block;font-size:10px;color:var(--sub);font-family:var(--mono);font-weight:400;margin-top:2px}.chip.on{border-color:var(--ink);background:var(--ink);color:#fff}.chip.on small{color:#c8d2dc}.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.field{margin-bottom:10px}.field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px}.field input[type=text],.field input[type=number]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}.field input.invalid{border-color:#e5484d;background:#fff5f5}.field input:disabled{background:#f0f2f5;color:var(--sub)}.dims-row{display:flex;gap:8px}.dims-row .field{flex:1}.err{font-size:11px;color:#e5484d;margin-top:2px;min-height:14px}.share-btn{width:100%;padding:11px;border:none;border-radius:10px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:8px}.share-btn:active{transform:translateY(1px)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:var(--ink);color:#fff;font-size:13px;padding:10px 18px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50}.toast.show{opacity:1}.share-url{font-size:11px;font-family:var(--mono);color:var(--sub);word-break:break-all;margin-top:6px;display:none}.share-url.show{display:block}.note{margin-top:16px;font-size:11.5px;color:var(--sub);line-height:1.7;border-top:1px dashed var(--line);padding-top:12px}.tag3d{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px #16202b2e;z-index:5}.tag3d small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;color:#bfd0e0;margin-top:1px}.tag3d:after{content:"";position:absolute;left:50%;bottom:-5px;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--ink);border-bottom:0}.scale-tag{position:absolute;left:16px;bottom:14px;background:#ffffffe6;border:1px solid var(--line);font-size:11px;color:var(--sub);padding:6px 10px;border-radius:8px;font-family:var(--mono);pointer-events:none;z-index:5}.hint{position:absolute;right:16px;bottom:14px;font-size:11px;color:var(--sub);background:#ffffffe6;border:1px solid var(--line);padding:6px 10px;border-radius:8px;pointer-events:none;z-index:5}.nogl{display:grid;place-items:center;height:100%;padding:40px;text-align:center;color:var(--sub);font-size:14px;line-height:2}@media(max-width:760px){main{flex-direction:column-reverse}aside{width:100%;max-height:48%;border-right:none;border-top:1px solid var(--line)}.head-in{padding:12px 14px 10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}