:root{color-scheme:dark;--bg:#102831;--panel:#173640;--ink:#e6efeb;--muted:#a5bfc1;--primary:#c0e1d6;--line:#68888c;--focus:#edd8a7;--error:#f2bdb1;font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
button,input,textarea{font:inherit}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.workspace{width:min(100%,720px);margin:auto;padding:calc(28px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.page-head{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.page-head h1{font-size:18px;line-height:1.4;font-weight:550;margin:0}
.back{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:-12px;border-radius:50%;color:var(--muted);text-decoration:none}
.back svg,.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ttl{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.editor{background:var(--panel);border:1px solid #365760;border-radius:14px}
textarea{display:block;width:100%;min-height:280px;max-height:65vh;resize:vertical;padding:20px;border:0;border-radius:14px 14px 0 0;background:transparent;color:var(--ink);font-size:16px;line-height:1.8;overflow-wrap:anywhere;caret-color:var(--primary)}
textarea::placeholder{color:var(--muted);opacity:.85}
textarea:focus{outline:2px solid var(--primary);outline-offset:-2px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-top:1px solid #365760}
.code-controls,.text-controls{display:flex;align-items:center;gap:8px;margin:0}
.code-controls{flex:1 1 100%;min-width:0}
.text-controls{width:100%}
#access-code{height:48px;width:132px;flex:1;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:500 22px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;caret-color:var(--primary)}
#access-code::placeholder{font:400 14px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;color:var(--muted);opacity:1}
#access-code:focus{outline:2px solid var(--primary);outline-offset:2px}
.button,.icon-button{min-height:48px;border:1px solid var(--line);border-radius:8px;padding:10px 20px;color:var(--ink);font-size:15px;line-height:1.6;font-weight:500;white-space:nowrap;background:transparent;transition:background .16s,border-color .16s}
.text-controls .button{flex:1}
.primary{border-color:var(--primary);background:var(--primary);color:#15363b}
.icon-button{display:flex;justify-content:center;align-items:center;flex:0 0 48px;width:48px;padding:0;color:var(--primary)}
.button:active,.icon-button:active{background:#31545d}
.primary:active{background:#a2cdbf}
.status-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:12px 2px 0;min-height:44px;font-size:13px}
#feedback{margin:0;color:var(--muted);overflow-wrap:anywhere}
#feedback[data-error=true]{color:var(--error)}
#remaining{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(min-width:560px){.workspace{padding-top:calc(72px + env(safe-area-inset-top))}.page-head{margin-bottom:28px}.toolbar{flex-wrap:nowrap}.code-controls{flex:0 1 auto}.text-controls{width:auto;flex-shrink:0}#access-code{flex:0 1 132px}textarea{min-height:340px;padding:24px}}
@media(max-width:359px){.workspace{padding-left:16px;padding-right:16px}.toolbar{padding:12px}.button{padding-left:16px;padding-right:16px}.page-head h1{font-size:17px}}
@media(hover:hover){.back:hover{color:var(--ink);background:#1c3c45}.button:hover:enabled,.icon-button:hover:enabled{background:#284a54}.primary:hover:enabled{background:#d0e9df}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}