:root{--ink:#3a2a4a;--bg:#f6ecd9;--ground:#e9d3b0;--pink:#ff8fb1;--panel:rgba(255,252,246,.88);--accent:#7b6cff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;color:var(--ink);background:linear-gradient(160deg,#c9d3e6,#9fb0cc);user-select:none}
#paper,#fx{position:fixed;left:0;top:0;height:100%;width:100%;pointer-events:none;overflow:hidden}
#paper{background:radial-gradient(120% 90% at 50% 35%,var(--bg) 55%,color-mix(in srgb,var(--bg) 85%,#b79a7a) 100%)}
#ground{position:absolute;left:0;right:0;bottom:0;top:70%;background:var(--ground);border-top:3px solid var(--ink)}
#ground::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background-image:linear-gradient(90deg,var(--ink) 0 26%,transparent 26%);background-repeat:repeat-x;background-size:var(--sp,80px) 3px;background-position:var(--gx,0) 14px;opacity:.55}
#ground::after{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(to bottom,rgba(58,42,74,.13),transparent)}
#c{position:fixed;left:0;top:0;width:100%;height:100%;display:block}
#fx{mix-blend-mode:multiply}
#fx .grain{position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .35  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
#fx .halftone{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(58,42,74,.28) 1.1px,transparent 1.7px);background-size:7px 7px;-webkit-mask-image:radial-gradient(130% 100% at 50% 45%,transparent 45%,#000 100%);mask-image:radial-gradient(130% 100% at 50% 45%,transparent 45%,#000 100%);opacity:.5}
body.no-grain #fx .grain{display:none}
body.no-half #fx .halftone{display:none}
body.mode3d #fx,body.mode3d #paper{display:none}

#title{position:fixed;left:50%;top:12px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:var(--panel);padding:7px 18px 7px 12px;border-radius:999px;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);z-index:5;white-space:nowrap}
#title .logo{width:30px;height:30px;border-radius:50%;background:var(--pink);display:grid;place-items:center;border:2px solid var(--ink);font-size:16px;color:#fff}
#title b{display:block;font-size:15px;letter-spacing:.06em}#title small{font-size:11px;opacity:.7}
.panel{position:fixed;top:12px;bottom:56px;width:236px;overflow-y:auto;background:var(--panel);border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);padding:10px 14px 12px;z-index:5;backdrop-filter:blur(6px);scrollbar-width:thin}
#left{left:12px}#right{right:12px}
.panel h2{margin:2px 0 8px;font-size:16px}
.panel section{padding:8px 0;border-top:2px dashed rgba(58,42,74,.25)}.panel section:first-of-type{border-top:0}
.lab{display:block;font-size:12px;font-weight:700;margin:6px 0 4px}
.lab em{font-style:normal;font-weight:400;opacity:.6}
.note{font-size:11px;line-height:1.45;opacity:.75;margin:6px 0 0}
.row{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:6px 0 2px}.row output{font-weight:700;color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button,.clips button,.seg button,#pad button{font:inherit;color:inherit;cursor:pointer}
.chips button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:3px 10px;font-size:12px}
.chips button.on{background:var(--pink);color:#fff}
.filebtn{display:block;margin-top:7px;font-size:12px;border:2px dashed var(--ink);border-radius:12px;text-align:center;padding:5px;cursor:pointer;background:rgba(255,255,255,.5)}
.filebtn input{display:none}
.clips{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:260px;overflow-y:auto;padding:2px}
.clips button{border:2px solid var(--ink);background:#fff;border-radius:12px;padding:5px 4px 4px;font-size:13px;font-weight:700;box-shadow:0 2px 0 var(--ink);line-height:1.15;transition:transform .08s}
.clips button small{display:block;font-weight:400;font-size:10px;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clips button:active{transform:translateY(2px);box-shadow:none}
.clips button.on{background:var(--accent);color:#fff}
.seg{display:flex;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff}
.seg button{flex:1;border:0;background:transparent;padding:5px 2px;font-size:12px;border-left:2px solid var(--ink)}
.seg button:first-child{border-left:0}.seg button.on{background:var(--accent);color:#fff;font-weight:700}
input[type=range]{width:100%;accent-color:var(--accent);margin:2px 0 4px}
.sw{position:relative;width:38px;height:22px;display:inline-block}.sw input{display:none}
.sw i{position:absolute;inset:0;background:#fff;border:2px solid var(--ink);border-radius:999px;transition:.15s}
.sw i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--ink);transition:.15s}
.sw input:checked+i{background:var(--pink)}.sw input:checked+i::after{left:18px;background:#fff;border:0}
.swatches{display:flex;gap:8px;margin-bottom:6px}
.swatches button{width:30px;height:30px;border-radius:50%;background:var(--c);border:2.5px solid var(--ink);cursor:pointer}
.swatches button.on{box-shadow:0 0 0 3px var(--pink)}
#hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:var(--panel);border:2.5px solid var(--ink);border-radius:999px;padding:6px 16px;font-size:13px;box-shadow:0 3px 0 var(--ink);z-index:5;white-space:nowrap}
kbd{display:inline-block;min-width:22px;text-align:center;border:2px solid var(--ink);border-radius:6px;background:#fff;padding:0 4px;font:700 11px/16px inherit;box-shadow:0 2px 0 var(--ink);margin:0 1px}
#pad{position:fixed;left:50%;bottom:58px;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
#pad button{width:46px;height:40px;border:2.5px solid var(--ink);border-radius:14px;background:var(--panel);box-shadow:0 3px 0 var(--ink);font-weight:700}
#pad button:active,#pad button.down{transform:translateY(3px);box-shadow:none;background:var(--pink)}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:6px 16px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .25s;z-index:9;pointer-events:none}
#toast.show{opacity:1}
body.hidepanels .panel,body.hidepanels #pad,body.hidepanels #hint{display:none}
body.shot #title,body.shot #pad{display:none}
@media (max-width:900px){.panel{width:180px}#title small{display:none}}