@import"https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource-variable/geist-mono@5/index.css";:root{color-scheme:dark;--sans: "Geist Variable", ui-sans-serif, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;--mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--ink: #f2f5f8;--muted: rgba(233, 240, 246, .62);--faint: rgba(233, 240, 246, .36);--line: rgba(255, 255, 255, .11);--line-soft: rgba(255, 255, 255, .06);--glass: rgba(11, 19, 28, .52);--accent: #f0a557;--ease: cubic-bezier(.22, .7, .2, 1);--fast: .16s var(--ease)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#05090e}body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}#pane{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}:root{--gutter: 0px;--note-size: 17px;--note-color: rgba(255,255,255,.93)}body:not(.panel-closed):not(.hide-ui){--gutter: 292px}#notes{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:7svh 3vw;padding-right:calc(3vw + var(--gutter))}body[data-talign-v=middle] #sheet{margin-top:auto;margin-bottom:auto}body[data-talign-v=bottom] #sheet{margin-top:auto;margin-bottom:0}#sheet{width:min(92%,68ch);max-height:86svh;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:3.2svh 4.5%;outline:none;cursor:text;text-align:center;font-family:var(--msg-font, var(--sans));font-style:var(--msg-style, normal);font-weight:var(--msg-weight, 300);font-size:var(--note-size);line-height:1.5;letter-spacing:.012em;white-space:pre-wrap;overflow-wrap:break-word;color:var(--note-color);text-shadow:0 1px 14px rgba(0,12,22,.62),0 0 46px rgba(0,10,20,.5);caret-color:var(--accent)}#sheet::selection,#sheet ::selection{background:#f0a5574d}#sheet::-webkit-scrollbar{width:6px}#sheet::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:3px}#sheet.empty:before{content:attr(data-ph);color:#ffffff4d;pointer-events:none}#panel{position:fixed;z-index:5;top:18px;right:18px;width:268px;max-height:calc(100vh - 36px);display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);box-shadow:0 18px 48px #00000061;transition:transform .3s var(--ease),opacity .3s var(--ease)}body.hide-ui #panel,body.panel-closed #panel{transform:translate(calc(100% + 26px));opacity:0;pointer-events:none}@media(max-width:720px){body.hide-ui #panel,body.panel-closed #panel{transform:translateY(calc(100% + 26px))}}.p-head{display:flex;align-items:baseline;gap:8px;padding:13px 14px 11px;border-bottom:1px solid var(--line-soft)}.p-head h1{font-size:12.5px;font-weight:500;letter-spacing:.01em}.p-head .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.p-head .x{margin-left:auto;background:none;border:0;color:var(--faint);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}.p-head .x:hover{color:var(--ink)}.p-body{overflow-y:auto;overscroll-behavior:contain}.p-body::-webkit-scrollbar{width:6px}.p-body::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:3px}.acc+.acc{border-top:1px solid var(--line-soft)}.acc-h{width:100%;display:flex;align-items:baseline;gap:8px;padding:11px 14px;background:none;border:0;cursor:pointer;text-align:left;transition:background var(--fast)}.acc-h:hover{background:#ffffff08}.acc-h .nm{font-size:12px;font-weight:500}.acc-h .hint{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}.acc-h .chev{margin-left:auto;width:6px;height:6px;align-self:center;border-right:1px solid var(--faint);border-bottom:1px solid var(--faint);transform:rotate(-45deg);transition:transform var(--fast),border-color var(--fast)}.acc.open .acc-h .chev{transform:rotate(45deg)}.acc-h:hover .chev{border-color:var(--ink)}.acc-c{display:none;padding-bottom:6px}.acc.open .acc-c{display:block}.sec{padding:4px 14px 6px}.sec+.sec{margin-top:6px}.sec>h2{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}.sec.act{padding-top:8px}.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;margin-bottom:7px}.row label{font-size:11.5px;color:var(--muted)}.row .val{font-family:var(--mono);font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}.row input[type=range]{grid-column:1 / -1;-webkit-appearance:none;appearance:none;width:100%;height:14px;background:none;cursor:pointer}.row input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}.row input[type=range]::-moz-range-track{height:1px;background:var(--line)}.row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;border-radius:50%;background:var(--ink);margin-top:-4px;transition:background var(--fast),transform var(--fast)}.row input[type=range]::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--ink)}.row input[type=range]:hover::-webkit-slider-thumb{background:var(--accent);transform:scale(1.25)}.row input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--accent)}.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--muted);cursor:pointer;transition:all var(--fast);white-space:nowrap}.chip:hover{color:var(--ink);border-color:#ffffff3d}#panel button:focus{outline:none}#panel button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}.chip.on{color:#14100a;background:var(--accent);border-color:var(--accent)}button.wide{width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:none;color:var(--muted);cursor:pointer;font-size:11px;transition:all var(--fast)}button.wide:hover{color:var(--ink);border-color:#ffffff42}.bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.bg{position:relative;aspect-ratio:3 / 2;border-radius:5px;overflow:hidden;cursor:pointer;border:1px solid var(--line);background:#0b131c center/cover no-repeat;padding:0;transition:border-color var(--fast),transform var(--fast)}.bg:hover{transform:translateY(-1px);border-color:#ffffff4d}.bg.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.bg span{position:absolute;inset:auto 0 0;font-size:8.5px;padding:8px 4px 3px;text-align:center;background:linear-gradient(transparent,#000000bf);color:#ffffffdb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bg.add{display:grid;place-items:center;font-size:17px;color:var(--faint);border-style:dashed}.bg.add:hover{color:var(--accent)}.files{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}.file{display:flex;align-items:center;border-radius:5px;transition:background var(--fast)}.file:hover{background:#ffffff0d}.file.on{background:#f0a5571f;box-shadow:inset 2px 0 0 var(--accent)}.file .fname{flex:1;min-width:0;text-align:left;background:none;border:0;cursor:pointer;padding:7px 4px 7px 9px;display:flex;flex-direction:column;gap:2px}.file .ft{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file.on .ft{color:var(--ink)}.file .fd{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--faint)}.file .fdel{flex:none;width:24px;height:26px;background:none;border:0;cursor:pointer;color:transparent;font-size:15px;line-height:1;transition:color var(--fast)}.file:hover .fdel{color:var(--faint)}.file .fdel:hover{color:var(--accent)}.swatches{display:flex;flex-wrap:wrap;gap:6px}.sw{width:20px;height:20px;border-radius:50%;cursor:pointer;padding:0;border:1px solid rgba(255,255,255,.22);transition:transform var(--fast),box-shadow var(--fast)}.sw:hover{transform:scale(1.12)}.sw.on{box-shadow:0 0 0 2px var(--glass),0 0 0 3px var(--accent)}.p-foot{display:flex;align-items:center;gap:8px;padding:9px 14px 10px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--faint)}.p-foot .fps{margin-left:auto;font-variant-numeric:tabular-nums}#saved{transition:color var(--fast)}#saved.flash{color:var(--accent)}#gallery{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;padding:22px 26px 26px;background:#040a1080;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}body.gallery #gallery{opacity:1;pointer-events:auto}body.gallery #notes,body.gallery #brand{opacity:0;pointer-events:none}#notes{transition:padding .3s var(--ease),opacity .22s var(--ease)}body.hide-ui #gallery{opacity:0;pointer-events:none}.g-head{display:flex;align-items:baseline;gap:10px;flex:none;margin-bottom:16px}.g-head h2{font-size:13px;font-weight:500;letter-spacing:.06em}.g-head span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.g-head button{margin-left:auto;background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer;line-height:1}.g-head button:hover{color:var(--ink)}.cards{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px;display:grid;align-content:start;gap:16px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));grid-auto-rows:min-content}.cards::-webkit-scrollbar{width:7px}.cards::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:4px}.card{position:relative;aspect-ratio:3 / 4;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:16px 15px 13px;border:1px solid var(--line);border-radius:10px;background:#09111a85;overflow:hidden;transition:transform var(--fast),border-color var(--fast),background var(--fast)}.card:hover{transform:translateY(-3px);border-color:#ffffff47;background:#0d18249e}.card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.card .c-t{font-size:14px;font-weight:400;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card .c-b{flex:1;min-height:0;font-size:11.5px;line-height:1.6;color:var(--muted);white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical}.card .c-d{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--faint)}.card .c-x{position:absolute;top:6px;right:6px;width:22px;height:22px;z-index:1;border:0;border-radius:5px;background:#0000004d;color:transparent;font-size:14px;line-height:1;cursor:pointer;transition:color var(--fast),background var(--fast)}.card:hover .c-x{color:var(--muted)}.card .c-x:hover{color:#14100a;background:var(--accent)}.card.new{align-items:center;justify-content:center;border-style:dashed;color:var(--faint);font-size:12px;gap:4px}.card.new:hover{color:var(--accent)}.card.new b{font-size:22px;font-weight:300}@media(max-width:720px){#gallery{padding:16px 14px 18px}.cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}#brand{position:fixed;z-index:4;left:22px;top:20px;pointer-events:none}#brand h1{font-size:13px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6)}#brand p{margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--muted);text-shadow:0 1px 10px rgba(0,0,0,.7)}body.hide-ui #brand{opacity:0}#brand{transition:opacity .3s var(--ease)}#open{position:fixed;z-index:5;top:18px;right:18px;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--glass);color:var(--muted);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--fast),color var(--fast);display:grid;place-items:center;font-size:14px}body.panel-closed #open{opacity:1;pointer-events:auto}body.hide-ui #open{opacity:0;pointer-events:none}#open:hover{color:var(--ink)}#drop{position:fixed;inset:0;z-index:9;display:none;place-items:center;background:#050b12b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}body.dragging-file #drop{display:grid}#fail{position:fixed;inset:0;z-index:20;display:none;place-content:center;text-align:center;padding:40px;background:#05090e;gap:12px}#fail h2{font-size:15px;font-weight:500;letter-spacing:.04em}#fail p{font-size:12.5px;line-height:1.8;color:var(--muted);max-width:52ch}@media(max-width:720px){#panel{inset:auto 12px 12px;width:auto;max-height:54svh}#brand{left:16px;top:14px}#brand p{display:none}body:not(.panel-closed):not(.hide-ui){--gutter: 0px}#notes{padding:4svh 4vw}#sheet{width:92%;max-height:86svh}body:not(.panel-closed):not(.hide-ui) #sheet{max-height:32svh;margin-top:0!important;margin-bottom:auto!important}}#fx{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}body:not(.fx-mode) #fx{display:none}body.fx-mode #pane{display:none}body.fx-mode #notes{align-items:center}body.fx-mode #sheet{font-size:calc(var(--note-size) * 1.35);line-height:1.35;max-height:78vh;overflow:visible;text-shadow:0 2px 18px rgba(0,0,0,.55),0 0 60px rgba(0,0,0,.4)}body[data-talign-h=left] #sheet{text-align:left}body[data-talign-h=centre] #sheet{text-align:center}body[data-talign-h=right] #sheet{text-align:right}#smudge{position:absolute;inset:0;display:none;pointer-events:none;z-index:3}body.smudge-on #sheet{color:transparent!important;text-shadow:none!important}body.smudge-on[data-text-effect=glow] #sheet{text-shadow:none!important;background:linear-gradient(var(--note-color),var(--note-color));-webkit-background-clip:text;background-clip:text}body.smudge-on[data-text-effect=outline] #sheet{text-shadow:none!important}body.smudge-on #sheet ::selection{background:#8cbeff4d}body.hide-ui #smudge{display:none!important}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.tile{position:relative;aspect-ratio:1 / .82;border-radius:5px;overflow:hidden;border:1px solid var(--line);cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:border-color var(--fast),transform var(--fast)}.tile:hover{transform:translateY(-1px);border-color:#ffffff4d}.tile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.tile .t-ic{font-size:19px;line-height:1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}.tile .t-nm{font-size:8px;letter-spacing:.03em;color:#ffffffe0;text-shadow:0 1px 4px rgba(0,0,0,.65);white-space:nowrap}.chip:disabled,.mini:disabled,.font:disabled,textarea:disabled{opacity:.45;cursor:default}.check{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11.5px;color:var(--muted);margin-bottom:8px}.check input{accent-color:var(--accent);width:13px;height:13px;margin:0}#exp-msg{width:100%;resize:vertical;min-height:52px;margin-bottom:6px;background:#ffffff0d;border:1px solid var(--line);border-radius:6px;padding:7px 9px;font-size:12px;line-height:1.45;color:var(--ink);outline:none;font-family:var(--sans)}#exp-msg:focus{border-color:#ffffff4d}button.mini{padding:3px 9px;margin-bottom:8px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--faint);cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;transition:all var(--fast)}button.mini:hover{color:var(--ink);border-color:#ffffff42}.fonts{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:8px}.font{padding:6px 4px;border:1px solid var(--line);border-radius:6px;background:none;color:var(--muted);cursor:pointer;font-size:14.5px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all var(--fast)}.font:hover{color:var(--ink);border-color:#ffffff42}.font.on{color:var(--accent);border-color:var(--accent);background:#f0a55714}button.wide.rec{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}button.wide.rec:not(.on):hover{color:var(--accent);border-color:var(--accent)}button.wide.rec.on{color:#fff;border-color:#e05050;background:#e050502e;animation:recpulse 1.6s ease-in-out infinite}@keyframes recpulse{50%{background:#e0505057}}.prog{height:3px;margin-top:8px;border-radius:2px;overflow:hidden;background:#ffffff1a}.prog i{display:block;height:100%;background:var(--accent);transition:width .2s linear}.tip{margin-top:8px;font-size:10px;line-height:1.5;color:var(--faint)}.tip.err{color:#e88}a.dl{display:block;margin-top:8px;padding:7px 10px;text-align:center;border:1px solid rgba(120,220,150,.4);border-radius:6px;color:#9fe8bb;font-size:10.5px;font-family:var(--mono);letter-spacing:.04em;text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:background var(--fast)}a.dl:hover{background:#78dc961f}.p-copy{padding:10px 14px 6px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center}#brand .copy{margin-top:7px;font-size:9px;color:var(--faint)}.sec.about{font-size:11px;line-height:1.65;color:var(--muted)}.sec.about p{margin-bottom:8px}.sec.about b{color:var(--ink);font-weight:500}.sec.about h2{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:12px 0 7px}.sec.about a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(240,165,87,.3)}.sec.about a:hover{border-bottom-color:var(--accent)}@media(max-width:720px){#panel{max-height:62svh}.fonts{grid-template-columns:repeat(2,1fr)}.font{font-size:13.5px;padding:5px 4px}.tiles{grid-template-columns:repeat(4,1fr)}.tile .t-nm{font-size:7px}.p-body{-webkit-overflow-scrolling:touch}}.cpick{position:relative;display:flex;align-items:center;gap:10px;width:100%}.cpick .swatch{width:58px;height:34px;padding:0;cursor:pointer;border:1px solid rgba(255,255,255,.22);border-radius:9px}.cpick .swatch:hover{border-color:#fff6}.cpick .hex{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);letter-spacing:.6px;text-transform:uppercase}.cpick-backdrop{position:fixed;inset:0;z-index:30}.cpick-pop{position:absolute;z-index:31;top:42px;left:0;right:0;max-height:calc(100vh - 96px);overflow-y:auto;background:var(--glass);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);padding:10px;display:grid;gap:8px;box-shadow:0 14px 40px #00000073}.cp-sv{position:relative;height:100px;border-radius:8px;cursor:crosshair;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);touch-action:none}.cp-sv i,.cp-hue i{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px #000000b3;transform:translate(-50%,-50%);pointer-events:none}.cp-hue{position:relative;height:12px;border-radius:6px;cursor:crosshair;touch-action:none;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.cp-hue i{top:50%}.cp-row{display:flex;align-items:center;gap:8px}.cp-row label,.cp-nums label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--faint);display:flex;align-items:center;gap:4px;text-transform:uppercase}.cp-row input,.cp-nums input{background:#ffffff0f;border:1px solid rgba(255,255,255,.14);border-radius:6px;color:var(--ink);padding:4px 6px;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;width:100%}.cp-row input{text-transform:lowercase}.cp-nums{display:flex;gap:6px}.cp-nums label{flex:1}.cp-nums input{width:100%;margin-top:2px;padding:4px}.cp-nums input::-webkit-outer-spin-button,.cp-nums input::-webkit-inner-spin-button{-webkit-appearance:none}.cp-presets{display:flex;flex-wrap:wrap;gap:5px}.cp-presets button{width:18px;height:18px;border-radius:5px;cursor:pointer;border:1px solid rgba(255,255,255,.18);padding:0}.cp-presets button.on{outline:2px solid var(--accent);outline-offset:1px}body[data-text-effect=glow] #sheet{text-shadow:0 0 .35em var(--note-color),0 0 1.2em var(--note-color)}body[data-text-effect=outline] #sheet{text-shadow:.055em 0 0 rgba(12,12,18,.9),-.055em 0 0 rgba(12,12,18,.9),0 .055em 0 rgba(12,12,18,.9),0 -.055em 0 rgba(12,12,18,.9),.04em .04em 0 rgba(12,12,18,.9),-.04em .04em 0 rgba(12,12,18,.9),.04em -.04em 0 rgba(12,12,18,.9),-.04em -.04em 0 rgba(12,12,18,.9)}body[data-text-effect=none] #sheet{text-shadow:none}#brand .dot{color:var(--accent)}.cpick-pop.up{top:auto;bottom:42px}#sheet::-webkit-scrollbar{display:none}
