:root{
  --bg:#f3f4f6;--card:#fff;--ink:#111827;--muted:#6b7280;--line:#d1d5db;
  --blue:#2563eb;--blue2:#1d4ed8;--soft:#eff6ff;--danger:#dc2626;--radius:18px;
}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif}
body{min-height:100vh}.app-header{position:sticky;top:0;z-index:20;display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 16px;background:rgba(17,24,39,.96);color:white;backdrop-filter:blur(8px)}
.app-header h1{font-size:20px;margin:0}.app-header p{font-size:12px;opacity:.8;margin:3px 0 0}.app-shell{width:min(760px,100%);margin:0 auto;padding:14px 12px 28px}.card{background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:0 8px 24px rgba(0,0,0,.05)}.card.compact{padding:12px 16px}.hidden{display:none!important}
.file-btn,.download-btn,.primary,.secondary,.ghost,.tab{border:0;border-radius:12px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}.file-btn{display:block;text-align:center;background:var(--blue);color:#fff;padding:15px;font-size:17px}.file-btn:active,.primary:active,.download-btn:active{transform:translateY(1px)}.hint,.mini-note,.tool-help{color:var(--muted);line-height:1.55}.hint{font-size:12px;margin:10px 2px 0}.mini-note{font-size:12px;margin:8px 0 0}.tool-help{font-size:14px;margin:4px 0 14px}
.section-title-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.section-title-row h2,.card h2{font-size:18px;margin:0 0 12px}.section-title-row h2{margin:0}.row-actions{display:flex;gap:8px;flex-wrap:wrap}.ghost{padding:8px 10px;background:#f3f4f6;color:#374151}.ghost.danger{background:#2b3444;color:#fecaca}.ghost:disabled{opacity:.45}
.canvas-stage{position:relative;overflow:auto;max-height:58vh;min-height:260px;border:1px solid #dbeafe;border-radius:14px;background-color:#fff;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;touch-action:none}
canvas{display:block;margin:0 auto;max-width:none;touch-action:none;image-rendering:pixelated}
.zoom-row,.control-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px}.zoom-row span,.control-row span{font-weight:700;color:#374151;font-size:14px}input[type=range]{width:100%}output{min-width:46px;text-align:right;font-variant-numeric:tabular-nums;color:#4b5563}
.tool-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.tab{padding:10px 8px;background:#eef2f7;color:#475569}.tab.active{background:var(--blue);color:white}.button-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.primary,.secondary{padding:12px 10px}.primary{background:var(--blue);color:#fff}.secondary{background:#e8eefc;color:#1e3a8a}.download-btn{width:100%;margin-top:14px;padding:15px;background:#111827;color:white;font-size:17px}
summary{font-weight:800;cursor:pointer}ol{padding-left:22px;line-height:1.8;color:#374151}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#111827;color:white;padding:10px 14px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:calc(100vw - 32px);text-align:center}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:480px){.button-grid.two{grid-template-columns:1fr}.app-header{align-items:flex-start}.app-header .ghost{font-size:12px}.canvas-stage{min-height:220px}.tool-tabs{grid-template-columns:1fr}}
.strong-note{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:9px 10px;color:#475569}