:root { color-scheme:light; --paper:#f7f1df; --surface:#fffdf5; --ink:#182044; --blue:#4051dc; --yellow:#f5d451; --coral:#ff7058; --muted:#6e6b78; --line:#182044; --radius:16px; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; color:var(--ink); }
body { background-color:var(--paper); background-image:radial-gradient(rgb(24 32 68 / .12) 1px,transparent 1.5px); background-size:20px 20px; }
body { font:13px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
button,input,select { font:inherit; }
header { height:84px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; max-width:1440px; margin:auto; padding:0 28px; }
header div { min-width:0; display:flex; align-items:baseline; gap:12px; }
header a { position:relative; color:var(--ink); font:800 12px/1 monospace; letter-spacing:.14em; text-decoration:none; }
header a::before { content:""; display:inline-block; width:10px; height:10px; margin-right:8px; border:2px solid var(--ink); border-radius:50%; background:var(--coral); box-shadow:8px 0 0 -2px var(--yellow),8px 0 0 0 var(--ink); }
header a:hover { color:var(--blue); }
h1 { margin:0; font-size:24px; font-weight:900; line-height:1; letter-spacing:-.03em; }
header p { margin:0; color:var(--muted); font:10px/1.3 ui-monospace,monospace; letter-spacing:.04em; }
#dimensions { padding:7px 10px; border:1.5px solid var(--ink); border-radius:999px; background:var(--surface); font:11px/1 monospace; box-shadow:2px 2px 0 var(--ink); }
main { max-width:1440px; margin:auto; padding:0 28px 28px; }
.toolbar { min-height:68px; display:flex; align-items:center; gap:24px; padding:10px; border:2px solid var(--ink); border-radius:var(--radius); background:var(--blue); box-shadow:5px 5px 0 var(--ink); }
.upload,button { border:1.5px solid transparent; border-radius:10px; padding:10px 14px; background:transparent; color:var(--ink); text-align:center; cursor:pointer; transition:transform .12s,box-shadow .12s,background .12s; }
.upload { flex:0 0 auto; border-color:var(--ink); background:var(--yellow); font-weight:800; box-shadow:2px 2px 0 var(--ink); }
.upload:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.upload input { position:absolute; width:1px; height:1px; opacity:0; }
.range { display:grid; grid-template-columns:auto 110px; align-items:center; gap:10px; color:#fff; white-space:nowrap; }
.range output { color:var(--yellow); font:700 12px/1 monospace; }
.range input { width:110px; accent-color:var(--yellow); }
.mode,.check { display:flex; gap:8px; align-items:center; color:#fff; font-size:12px; }
.mode select { border:0; border-radius:7px; padding:6px 8px; background:#fff; color:var(--ink); }
.framing { position:relative; color:#fff; }
.framing summary { cursor:pointer; list-style:none; white-space:nowrap; }
.framing summary::after { content:"＋"; margin-left:5px; }
.framing[open] summary::after { content:"−"; }
.framing div { position:absolute; z-index:3; top:34px; left:50%; display:grid; gap:12px; width:230px; padding:14px; border:2px solid var(--ink); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:4px 4px 0 var(--ink); transform:translateX(-50%); }
.framing label { display:grid; grid-template-columns:36px 1fr; align-items:center; gap:8px; }
.framing input { width:100%; accent-color:var(--coral); }
.check input { accent-color:var(--yellow); }
.actions { display:flex; gap:4px; margin-left:auto; }
.actions button { color:#fff; }
.actions button:first-child:hover { background:rgb(255 255 255 / .13); }
.actions button:last-child { border-color:var(--ink); background:var(--coral); color:var(--ink); font-weight:800; box-shadow:2px 2px 0 var(--ink); }
.actions button:last-child:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.content { min-height:calc(100vh - 180px); display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:18px; margin-top:18px; }
.workspace { min-width:0; display:grid; grid-template-rows:1fr auto; padding:24px; overflow:auto; border:2px solid var(--ink); border-radius:var(--radius); background-color:#dce1ff; background-image:radial-gradient(rgb(64 81 220 / .24) 2px,transparent 2px); background-size:24px 24px; box-shadow:5px 5px 0 var(--ink); }
.workspace.dragging { background-color:#f6dda0; outline:4px solid var(--coral); outline-offset:-8px; }
.sheet { align-self:center; justify-self:center; max-width:100%; padding:12px; border:2px solid var(--ink); border-radius:5px; background:#fffdf7; box-shadow:7px 7px 0 rgb(24 32 68 / .22); }
canvas { display:block; max-width:100%; max-height:calc(100vh - 150px); width:auto; height:auto; cursor:crosshair; }
#tip { justify-self:center; margin:16px 0 0; padding:6px 10px; border-radius:999px; background:var(--ink); color:#fff; font-size:10px; text-align:center; }
.materials { padding:20px; overflow:auto; border:2px solid var(--ink); border-radius:var(--radius); background:var(--yellow); box-shadow:5px 5px 0 var(--ink); }
.materials-title { display:flex; justify-content:space-between; align-items:start; margin-bottom:16px; }
.materials-title p { margin:0 0 2px; font-size:18px; font-weight:900; letter-spacing:-.02em; }
.materials-title small { color:#6a5c28; }
.materials-title b { padding:6px 8px; border:1.5px solid var(--ink); border-radius:999px; background:var(--surface); font:11px/1 monospace; }
.eraser { width:100%; margin-bottom:10px; border:1.5px dashed var(--ink); background:rgb(255 253 245 / .6); }
.eraser:hover,.eraser.active { border-style:solid; background:var(--surface); box-shadow:2px 2px 0 var(--ink); }
#swatches { display:grid; gap:6px; }
.swatch { display:grid; grid-template-columns:25px 1fr auto; gap:9px; align-items:center; width:100%; padding:8px; border:1.5px solid var(--ink); border-radius:9px; background:var(--surface); text-align:left; }
.swatch:hover,.swatch.active { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--ink); }
.swatch.active { background:#e8ebff; }
.swatch i { width:23px; height:23px; border:1.5px solid var(--ink); border-radius:50%; box-shadow:inset 3px 3px 0 rgb(255 255 255 / .25); }
.swatch span { font-size:11px; }
.swatch code { font:9px/1 monospace; color:var(--muted); }
button:focus-visible,.upload:focus-within,input:focus-visible,a:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
@media (max-width:1180px) {
  .toolbar { flex-wrap:wrap; gap:12px 18px; }
  .range { flex:1 1 190px; }
}
@media (max-width:900px) {
  header { padding:0 16px; grid-template-columns:auto 1fr auto; }
  header p { display:none; }
  main { padding:0 16px 16px; }
  .toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  .upload,.mode,.framing,.check { align-self:center; }
  .range { grid-column:span 2; width:100%; }
  .range input { width:100%; }
  .actions { grid-column:1/-1; width:100%; margin:0; }
  .actions button { flex:1; }
  .content { grid-template-columns:1fr; min-height:auto; }
  .workspace { min-height:58vh; }
  .materials { overflow:visible; }
  #swatches { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  header { height:70px; grid-template-columns:auto 1fr auto; gap:10px; padding:0 12px; }
  header a { font-size:0; }
  header a::before { margin:0; }
  h1 { font-size:20px; }
  #dimensions { padding:6px 8px; font-size:10px; box-shadow:1px 1px 0 var(--ink); }
  main { padding:0 10px 12px; }
  .toolbar { grid-template-columns:1fr 1fr; padding:8px; border-radius:12px; box-shadow:3px 3px 0 var(--ink); }
  .upload,.range,.actions { grid-column:1/-1; }
  .upload,button { min-height:44px; }
  .mode,.framing { justify-self:start; }
  .check { justify-self:end; }
  .range { grid-template-columns:52px minmax(0,1fr); }
  .framing div { right:0; left:auto; width:min(230px,calc(100vw - 40px)); transform:none; }
  .content { gap:12px; margin-top:12px; }
  .workspace { min-height:52vh; padding:12px; border-radius:12px; box-shadow:3px 3px 0 var(--ink); }
  .sheet { padding:6px; box-shadow:4px 4px 0 rgb(24 32 68 / .22); }
  canvas { max-height:none; }
  #tip { max-width:100%; line-height:1.35; }
  .materials { padding:14px; border-radius:12px; box-shadow:3px 3px 0 var(--ink); }
  #swatches { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }
@media print {
  header,.toolbar,#tip,.eraser { display:none !important; }
  main { display:block; }
  .content { display:block; }
  .workspace { padding:0; border:0; background:none; overflow:visible; }
  .sheet { padding:0; box-shadow:none; }
  canvas { max-width:100%; max-height:none; }
  .materials { border:0; page-break-before:always; }
}