:root{
  --bg:#f9f1ec;--surface:#fdf8f4;--ink:#2b1b17;--ink-2:#5a4640;--ink-3:#8a7770;--line:#e6d5cb;--line-strong:#cdb5a8;
  --accent:#c0331f;--accent-ink:#fdf8f4;--ok:#3f7a4a;--err:#a8402f;
  --ui:"Yu Gothic UI","Meiryo UI","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1f1513;--surface:#281b18;--ink:#f2e4de;--ink-2:#d2bfb7;--ink-3:#9c857c;--line:#3a2a25;--line-strong:#54403a;
  --accent:#f07a66;--accent-ink:#1f1513;--ok:#7fb88a;--err:#e59080;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1f1513;--surface:#281b18;--ink:#f2e4de;--ink-2:#d2bfb7;--ink-3:#9c857c;--line:#3a2a25;--line-strong:#54403a;
  --accent:#f07a66;--accent-ink:#1f1513;--ok:#7fb88a;--err:#e59080;
  color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--ui);display:flex;flex-direction:column;min-height:100dvh}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}

.hdr{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;margin:0;font-weight:600}
.logo{width:28px;height:28px;color:var(--ink);flex-shrink:0}
.brand-name{font-size:19px;letter-spacing:.06em}
.brand-sub{font-size:12px;font-weight:400;color:var(--ink-3)}
.privacy{margin:0 0 0 auto;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 10px}
.icon-btn{border:1px solid var(--line);background:transparent;border-radius:8px;width:34px;height:30px}
.icon-btn:hover{border-color:var(--line-strong)}

button{background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:4px 12px;line-height:1.4}
button:hover:not(:disabled){border-color:var(--line-strong)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover:not(:disabled){filter:brightness(1.07)}
button:focus-visible,input:focus-visible,select:focus-visible,.sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.main{flex:1;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:16px;padding:16px;align-items:start}
.side{display:flex;flex-direction:column;gap:14px;min-width:0}
.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-2);border:0;margin:0;padding:0;min-width:0}
.field legend{padding:0;margin-bottom:5px}
.txt{font-size:22px;font-weight:600;letter-spacing:.08em;padding:6px 12px}
input[type=text],input[type=date],select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;color:var(--ink)}
input[type=text]:hover,input[type=date]:hover,select:hover{border-color:var(--line-strong)}
.hint{color:var(--ink-3);font-size:12px}

.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg legend{grid-column:1/-1}
.seg-i{position:relative;display:block}
.seg-i input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.seg-i span{display:flex;flex-direction:column;align-items:center;gap:0;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 4px;font-size:14px;font-weight:600;color:var(--ink)}
.seg-i small{font-size:11px;font-weight:400;color:var(--ink-3)}
.seg-i input:checked+span{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.seg-i input:checked+span small{color:var(--accent-ink);opacity:.85}
.seg-i input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.date-opts{display:flex;flex-direction:column;gap:14px}

.colors{display:flex;align-items:center;gap:8px}
.sw{width:30px;height:30px;border-radius:50%;padding:0;border:2px solid var(--line-strong)}
.sw[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:2px}
#color{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}

.adj{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;background:var(--surface);margin:0}
.adj legend{font-size:12px;color:var(--ink-3);padding:0 6px}
.rng{display:grid;grid-template-columns:7.5em minmax(0,1fr) 2.6em 1.6em;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);padding:3px 0}
.rng input{accent-color:var(--accent);min-width:0}
.rng output{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.rng span{color:var(--ink-3);font-size:12px}

.view{display:flex;flex-direction:column;gap:10px;min-width:0;position:sticky;top:12px}
.vbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.acts{display:flex;flex-wrap:wrap;gap:6px}
.stat{margin:0;font-size:12.5px;color:var(--ink-2);min-height:1.5em}
.stat.ok{color:var(--ok)}
.stat.err{color:var(--err)}
.stage{display:flex;align-items:center;justify-content:center;min-height:360px;padding:20px;overflow:auto;border:1px solid var(--line);border-radius:12px;background-color:#fff;background-image:conic-gradient(#ececec 25%,transparent 0 50%,#ececec 0 75%,transparent 0);background-size:20px 20px}
.stage canvas{max-width:100%;height:auto !important;flex-shrink:0}
.note{margin:0;font-size:12px;color:var(--ink-3)}

.tz-foot{display:flex;justify-content:center;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.tz-link{display:inline-flex;align-items:center;gap:10px;padding:4px 16px 4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:12px;line-height:1.4;transition:border-color .15s,color .15s}
.tz-link:hover{border-color:var(--line-strong);color:var(--ink)}
.tz-mark{width:22px;height:22px;color:#8E5532;flex-shrink:0}
.tz-name{font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--ink)}
.tz-sub{color:var(--ink-3)}
:root[data-theme="dark"] .tz-mark{color:#C9A063}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tz-mark{color:#C9A063}}

@media (max-width:760px){
  .main{grid-template-columns:1fr}
  .view{position:static}
  .brand-sub{display:none}
  .stage{min-height:260px}
}