:root{--bg:#f6f5fa;--card:#fff;--fg:#1c1a22;--mut:#5c5868;--line:#dcd8e6;--acc:#5b3aa0;--acc2:#efe9fb;--warn:#b3261e;--ok:#1d6b3a}
@media (prefers-color-scheme:dark){:root{--bg:#131218;--card:#1c1a24;--fg:#ecebf2;--mut:#aaa6b8;--line:#35323f;--acc:#b9a0ff;--acc2:#2a2340;--warn:#ff8a80;--ok:#7fd49b}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;font-size:16px}
a{color:var(--acc)}
.wrap{max-width:900px;margin:0 auto;padding:0 16px}
.hd{background:var(--card);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;justify-content:space-between;align-items:center;min-height:52px;gap:12px}
.logo{font-weight:700;color:var(--fg);text-decoration:none;font-size:1.05rem}
.hd-link{font-size:.92rem;padding:12px 0}
h1{font-size:1.6rem;line-height:1.3;margin:.6em 0 .3em}
h2{font-size:1.18rem;margin:1.1em 0 .5em}
h3{font-size:1rem;margin:1em 0 .3em}
.lead{color:var(--mut);margin-top:0}
.small,small{font-size:.86rem;color:var(--mut)}
.bc{font-size:.86rem;color:var(--mut);margin-top:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:14px 0;min-width:0}
.card>h2:first-child{margin-top:.2em}
.tools{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.tools a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--fg);min-height:48px;height:100%}
.tools a b{display:block;color:var(--acc)}
.tools a span{font-size:.88rem;color:var(--mut)}
.row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:8px 0}
label{display:inline-flex;flex-direction:column;gap:4px;font-size:.92rem;max-width:100%}
label.chk{flex-direction:row;align-items:center;gap:8px;min-height:44px}
.chk input{width:22px;height:22px;margin:0}
input[type=number],input[type=text],input[type=time],select,input[type=file]{font:inherit;font-size:16px;padding:9px 10px;min-height:46px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);max-width:100%}
input[type=number]{width:8em}
input[type=text]{width:14em}
input[type=text].wide{width:36em}
input[type=color]{width:64px;min-height:46px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
input[type=file]{width:100%}
.opts{display:flex;flex-wrap:wrap;gap:0 18px}
.btn,.chip{font:inherit;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 16px;border-radius:8px;border:1px solid var(--acc);background:var(--acc);color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip{background:var(--acc2);color:var(--fg);border-color:var(--line);border-radius:999px;min-height:44px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.out{display:block;background:var(--acc2);border-radius:10px;padding:12px 14px;margin:10px 0 6px;min-height:1.7em;overflow-wrap:anywhere}
.out .big{font-size:1.4rem;font-weight:700}
.out .warn,.warn{color:var(--warn)}
.out .ok{color:var(--ok)}
.urlrow{display:flex;gap:8px;margin:8px 0}
.urlrow input{flex:1;min-width:0;width:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.prev{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:8px 0;height:360px}
.prev iframe{width:100%;height:100%;border:0;display:block;background:transparent}
.prev.wide{height:auto;aspect-ratio:16/9}
.checker{background-color:#3a3a44;background-image:linear-gradient(45deg,#4a4a55 25%,transparent 25%),linear-gradient(-45deg,#4a4a55 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#4a4a55 75%),linear-gradient(-45deg,transparent 75%,#4a4a55 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
.tbl{border-collapse:collapse;width:100%;font-size:.93rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left;vertical-align:top}
.tbl thead th{background:var(--acc2);font-weight:600}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px;margin:8px 0}
.prose p,.prose li{max-width:46em}
.prose code{background:var(--acc2);padding:1px 5px;border-radius:4px;font-size:.9em;overflow-wrap:anywhere}
.promo ul{padding-left:1.1em}
.promo li{margin:6px 0}
.promo a{display:inline-block;padding:6px 2px}
.emotes{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:10px 0}
.emotes figure{margin:0;text-align:center;font-size:.85rem}
.emotes canvas{display:block;margin:0 auto 4px;background-color:#ccc;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.emotes a{display:inline-flex;align-items:center;min-height:40px}
.chatprev{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chatprev>div{padding:12px;border-radius:8px;font-size:13px;line-height:28px}
.chatprev .light{background:#fff;color:#0e0e10}.chatprev .dark{background:#18181b;color:#efeff1}
.chatprev img{width:28px;height:28px;vertical-align:middle}
.days{display:grid;gap:6px;margin:8px 0}
.dayrow{display:grid;grid-template-columns:5.5em 8.5em 1fr;gap:8px;align-items:center}
.dayrow input[type=text]{width:100%}
.canvaswrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:10px 0}
.canvaswrap canvas{display:block;width:100%;height:auto}
.canvaswrap.narrow{max-width:320px}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);margin:6px 0}
.ft{border-top:1px solid var(--line);margin-top:28px;padding:14px 0 30px;font-size:.88rem;color:var(--mut)}
.ft-tools{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.ft-tools a{display:inline-block;padding:8px 0}
.ft a{display:inline-block;padding:6px 0}
.ad{margin:16px 0;min-height:100px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@media (max-width:560px){h1{font-size:1.4rem}.dayrow{grid-template-columns:4.8em 7.6em 1fr}.chatprev{grid-template-columns:1fr}input[type=text]{width:100%}label{flex:1 1 100%}.row label.chk{flex:0 1 auto}.urlrow{flex-wrap:wrap}.urlrow .btn{width:100%}.prev{height:300px}}