:root{color-scheme:dark;font-family:Inter,Arial,Helvetica,sans-serif;color:#f4f3ff;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}
button,input{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.42}
button:focus-visible,input:focus-visible{outline:2px solid #9af4ff;outline-offset:4px}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}.app{position:relative;overflow:hidden;height:100dvh}
.meter{display:flex;flex-direction:column;gap:5px;min-width:0;font-variant-numeric:tabular-nums}
.control-area{position:absolute;display:flex;align-items:center;flex-direction:column;justify-content:center;z-index:3;margin:0}
.tool,.icon-button{border:1px solid #ffffff25;background:#0c1025a6;border-radius:9px;height:37px}
.tool{display:flex;align-items:center;gap:9px;padding:0 12px;font-size:11px}.tool svg,.icon-button svg{width:18px;height:18px}
.icon-button{width:37px;display:grid;place-items:center;font-size:25px}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading h2{margin:0}
.preview-panel{z-index:10;overflow:auto}.preview-panel>p{font-size:12px;color:#b4bbc5;line-height:1.6;margin:9px 0 17px}
.preview-action{width:100%;padding:12px 10px;margin-bottom:8px;display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #ffffff22;background:#ffffff05;border-radius:6px}
.preview-action:hover{background:#ffffff10}.preview-action>span{width:26px;text-align:center;font-size:20px;color:#9ee7ff}
.preview-action strong{font-size:12px;font-weight:600;display:block}.preview-action small{font-size:10px;color:#b0b6be;display:block;margin-top:4px}
.size-control{display:block;margin:22px 1px 24px;font-size:12px;color:#c0c3d9}.size-control>span{display:flex;justify-content:space-between;margin-bottom:12px}.size-control input{width:100%;accent-color:#a5aaff}
.preview-panel>.prototype-note{font-size:11px;margin:23px 0 0;color:#aab0b8}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;background:#102635ee;color:#d7edfa;font-size:14px}
.loader{width:28px;height:28px;border:2px solid #87d9ff22;border-top-color:#9aefff;border-radius:50%;animation:rotate 1s linear infinite}
.loading button{background:#254664;border:1px solid #7ecfff;border-radius:6px;padding:9px 16px}
@keyframes rotate{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}