:root{--accent: #1ba1e2;--on-accent: #ffffff;--danger: #e51400;--bg: #000000;--fg: #ffffff;--dim: #9a9a9a;--surface: #1d1d1d;--line: #3d3d3d;--field: #cfcfcf;--field-fg: #000000;--field-focus: #ffffff;--appbar: #1f1f1f;--track: #3d3d3d;--font: "Segoe UI", "Segoe WP", Selawik, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;--ease: cubic-bezier(.1, .9, .2, 1);color-scheme:dark}@media (prefers-color-scheme: light){:root:not([data-theme=dark]){--bg: #ffffff;--fg: #000000;--dim: #6b6b6b;--surface: #f0f0f0;--line: #c8c8c8;--field: #ffffff;--field-fg: #000000;--field-focus: #ffffff;--appbar: #dddddd;--track: #c8c8c8;color-scheme:light}:root:not([data-theme=dark]) input:not([type=checkbox]):not([type=range]):not([type=color]),:root:not([data-theme=dark]) textarea,:root:not([data-theme=dark]) select{border-color:#999}}:root[data-theme=light]{--bg: #ffffff;--fg: #000000;--dim: #6b6b6b;--surface: #f0f0f0;--line: #c8c8c8;--field: #ffffff;--field-fg: #000000;--field-focus: #ffffff;--appbar: #dddddd;--track: #c8c8c8;color-scheme:light}:root[data-theme=light] input:not([type=checkbox]):not([type=range]):not([type=color]),:root[data-theme=light] textarea,:root[data-theme=light] select{border-color:#999}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}[hidden]{display:none!important}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border-radius:0}:focus-visible{outline:2px dashed var(--fg);outline-offset:2px}.noscript{padding:12px 24px;background:#e51400;color:#fff;font-family:var(--font);font-size:14px}.noscript p{max-width:1192px;margin:4px auto}.app{max-width:1240px;margin:0 auto;padding:24px 24px 120px}.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:14px;font-weight:600;letter-spacing:.08em}.chrome{display:flex;gap:6px}.chrome-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--fg);text-decoration:none;min-width:36px;height:32px;padding:0 10px;background:transparent;border:2px solid var(--fg);font-size:13px;font-weight:600}.chrome-btn:active{background:var(--fg);color:var(--bg)}.chrome-btn.swatch{background:var(--accent);border-color:var(--accent);width:32px;min-width:32px}.accents{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;max-width:420px;margin:14px 0 0 auto;animation:drop .25s var(--ease)}.accent{aspect-ratio:1;border:0;background:var(--c)}.accent:active{transform:scale(.92)}.title{font-size:clamp(52px,9vw,96px);font-weight:200;line-height:1;letter-spacing:-.02em;margin:12px 0 14px -4px;text-transform:lowercase}.subtitle{margin:0 0 8px;color:var(--dim);font-size:17px;font-weight:300}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:56px;align-items:start}.col-output{position:sticky;top:16px}.section{font-size:30px;font-weight:300;margin:28px 0 14px;text-transform:lowercase}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;perspective:900px}.tile{--rx: 0deg;--ry: 0deg;position:relative;aspect-ratio:1;border:0;padding:10px;background:var(--accent);color:var(--on-accent);text-align:left;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transform-origin:0 50%;transition:transform .15s var(--ease),background .2s;animation:turnstile .55s var(--ease) backwards}.tile:nth-child(2){animation-delay:.04s}.tile:nth-child(3){animation-delay:.08s}.tile:nth-child(4){animation-delay:.12s}.tile:nth-child(5){animation-delay:.16s}.tile:nth-child(6){animation-delay:.2s}.tile:nth-child(7){animation-delay:.24s}.tile:nth-child(8){animation-delay:.28s}.tile:nth-child(9){animation-delay:.32s}.tile.pressed{transform:perspective(500px) rotateX(var(--rx)) rotateY(var(--ry)) scale(.97);transform-origin:50% 50%}.tile-ico{width:34px;height:34px;margin:6px 0 0 2px}.tile-name{font-size:15px;font-weight:400;text-transform:lowercase}.tile-check{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 34px 34px 0;border-color:transparent var(--fg) transparent transparent;opacity:0;transition:opacity .15s}.tile-check .ico{position:absolute;top:2px;right:-32px;width:15px;height:15px;color:var(--bg);stroke-width:3}.tile.on{box-shadow:inset 0 0 0 3px var(--fg)}.tile.on .tile-check{opacity:1}.tile:not(.on){filter:saturate(.85) brightness(.88)}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}.form.enter{animation:continuum .4s var(--ease)}.field{display:flex;flex-direction:column;gap:4px;min-width:0}.field.wide{grid-column:1 / -1}.label{font-size:14px;color:var(--dim)}.label b{color:var(--fg);font-weight:600;margin-left:6px}input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),textarea,select{width:100%;min-height:42px;padding:8px 10px;border:2px solid transparent;border-radius:0;background:var(--field);color:var(--field-fg);font-size:16px;outline:none;transition:background .1s,border-color .1s;-webkit-appearance:none;appearance:none}textarea{resize:vertical;line-height:1.4}input:focus,textarea:focus,select:focus{background:var(--field-focus);border-color:var(--accent)!important}input:disabled,select:disabled{opacity:.35}input::placeholder,textarea::placeholder{color:gray}select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}option{color:#000;background:#fff}.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-size:14px;min-height:32px}.check input{position:absolute;opacity:0;width:1px;height:1px}.check i{position:relative;flex:none;width:24px;height:24px;border:2px solid var(--fg);background:transparent}.check input:checked+i{background:var(--accent);border-color:var(--accent)}.check input:checked+i:after{content:"";position:absolute;left:6px;top:1px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}.check input:focus-visible+i{outline:2px dashed var(--fg);outline-offset:2px}.privacy{background:var(--surface);padding:16px 20px}.privacy ul{list-style:none;margin:0 0 12px;padding:0}.privacy li{position:relative;padding-left:22px;margin:6px 0}.privacy li:before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--accent)}.onion{border-left:4px solid #7d4698;padding:6px 12px;margin:12px 0;display:flex;flex-direction:column;gap:2px}.onion code{font-family:Consolas,Cascadia Mono,Menlo,monospace;font-size:13px;word-break:break-all;user-select:all}.link{color:var(--accent);font-weight:600;text-decoration:none}.link:hover{text-decoration:underline}.preview-wrap{background:var(--surface);padding:20px}.preview{aspect-ratio:1;display:grid;place-items:center;background-color:#fff;background-image:linear-gradient(45deg,#e6e6e6 25%,transparent 25%),linear-gradient(-45deg,#e6e6e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e6e6 75%),linear-gradient(-45deg,transparent 75%,#e6e6e6 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;animation:fade .3s var(--ease)}.preview svg{width:100%;height:100%;display:block}.preview.is-empty{background:var(--bg);border:2px dashed var(--line)}.empty{text-align:center;color:var(--dim);padding:24px;max-width:260px}.empty-ico{width:64px;height:64px;color:var(--accent);margin-bottom:8px}.meta{margin:12px 0 0;font-size:13px;color:var(--dim);min-height:1.2em}.msg{margin:8px 0 0;padding:8px 12px;background:var(--danger);color:#fff;font-size:13px}.style{display:flex;flex-direction:column;gap:18px}.row{display:flex;flex-direction:column;gap:6px}.seg{display:flex}.seg button{flex:1;min-height:38px;padding:4px 6px;border:2px solid var(--fg);background:transparent;font-size:14px;font-weight:600;text-transform:lowercase}.seg button+button{margin-left:-2px}.seg button.on{position:relative;background:var(--accent);border-color:var(--accent);color:var(--on-accent);z-index:1}.seg button:disabled:not(.on){opacity:.35;cursor:not-allowed}.colors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px}.color{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--dim);min-width:0}.color .check{color:var(--fg)}input[type=color]{-webkit-appearance:none;appearance:none;width:100%;height:40px;padding:0;border:2px solid var(--fg);background:none;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0}input[type=color]::-moz-color-swatch{border:0}input[type=color]:disabled{opacity:.3;cursor:not-allowed}input[type=range]{--p: 50%;-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:12px;background:linear-gradient(to right,var(--accent) var(--p),var(--track) var(--p))}input[type=range]::-moz-range-track{height:12px;background:linear-gradient(to right,var(--accent) var(--p),var(--track) var(--p))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:26px;margin-top:-7px;background:var(--fg);border:0;border-radius:0}input[type=range]::-moz-range-thumb{width:10px;height:26px;background:var(--fg);border:0;border-radius:0}.logo-row{display:flex;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border:2px solid var(--fg);background:transparent;font-weight:600;font-size:14px;cursor:pointer;position:relative}.btn:active{background:var(--fg);color:var(--bg)}.btn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.btn.ghost{border-color:var(--line)}.hint{margin:0;font-size:12px;color:var(--dim)}.about{margin-top:48px;border-top:1px solid var(--line);padding-top:8px}.about-body{max-width:760px;font-size:17px;font-weight:300}.about-body p{margin:0 0 14px}.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}.feature{background:var(--surface);border-left:6px solid var(--accent);padding:16px 18px}.feature h3{margin:0 0 6px;font-size:19px;font-weight:400}.feature p{margin:0;color:var(--dim);font-size:14px}.faq{max-width:900px}.faq details{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;list-style:none;padding:14px 40px 14px 0;font-size:18px;font-weight:300;position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:6px;top:8px;font-size:26px;font-weight:200;color:var(--accent)}.faq details[open] summary:after{content:"−"}.faq details p{margin:0 0 14px;color:var(--dim)}.appbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;gap:clamp(12px,5vw,40px);padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--appbar)}.ab{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;font-size:12px;text-transform:lowercase;min-width:56px}.ring{display:grid;place-items:center;width:46px;height:46px;border:2px solid currentColor;border-radius:50%;transition:background .1s,color .1s}.ring .ico{width:22px;height:22px}.ab:active .ring{background:var(--fg);color:var(--appbar)}.ab.danger:active .ring{background:var(--danger);border-color:var(--danger);color:#fff}.toast{position:fixed;top:0;left:0;right:0;z-index:20;padding:12px 24px;background:var(--accent);color:var(--on-accent);font-weight:600}.toast.show{animation:drop .3s var(--ease)}@keyframes turnstile{0%{opacity:0;transform:perspective(900px) rotateY(-80deg)}}@keyframes continuum{0%{opacity:0;transform:translate(40px)}}@keyframes drop{0%{opacity:0;transform:translateY(-100%)}}@keyframes fade{0%{opacity:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media (max-width: 900px){.layout{display:flex;flex-direction:column;align-items:stretch;gap:0}.col-input{display:contents}.col-output{order:1}.privacy-block{order:2}.col-output{position:static}.col-input .section:first-child{margin-top:28px}}@media (max-width: 520px){.app{padding:16px 16px 110px}.tiles{grid-template-columns:repeat(3,1fr)}.form{grid-template-columns:1fr}.accents{max-width:none}.preview-wrap{padding:12px}}.seg[data-name=ecl] button{text-transform:none}