*{box-sizing:border-box;margin:0;padding:0}:root{--sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;--serif:"Iowan Old Style", "Palatino Linotype", "Georgia", "Times New Roman", serif}html,body,#root{height:100%}body{font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fcfbf9;transition:background-color .4s;overflow:hidden}body.dark{background-color:#14151a}:root{--bg:#fcfbf9;--ink:#1f2430;--ink-soft:#6b7280;--ink-faint:#b6b3ab;--draft:#3b3f47;--line:#ecece6;--surface:#0000000a;--accent-bg:#fff;--shadow:0 1px 3px #0000000f, 0 6px 24px #0000000d}body.dark{--bg:#14151a;--ink:#e7e6e2;--ink-soft:#8b8f99;--ink-faint:#4b4f59;--draft:#c4c6cc;--line:#262832;--surface:#ffffff0f;--accent-bg:#1c1e26;--shadow:0 1px 3px #0000004d, 0 6px 24px #00000059}.app{background:var(--bg);height:100dvh;transition:background-color .4s;position:relative}.editor{justify-content:center;height:100dvh;padding:16vh 24px 34vh;display:flex;overflow-y:auto}.text-column{cursor:text;width:100%;max-width:680px;min-height:55vh;position:relative}.result-input,.draft-input{resize:none;word-wrap:break-word;white-space:pre-wrap;background:0 0;border:none;outline:none;width:100%;margin:0;padding:0;display:block;overflow:hidden}.result-input{font-family:var(--serif);color:var(--ink);letter-spacing:.1px;font-size:21px;line-height:1.65;transition:opacity .4s}.result-input.streaming{opacity:.92}.draft-input{font-family:var(--sans);color:var(--draft);filter:blur(4.2px);text-shadow:0 0 10px #787d8759;min-height:30vh;caret-color:var(--ink-soft);font-size:19px;line-height:1.7;transition:filter .5s,opacity .5s}.draft-input:read-only{opacity:.45}.result-input+* .draft-input,.text-column>.result-input+.draft-wrap{margin-top:1.4em}.draft-wrap{position:relative}.welcome{color:var(--ink-faint);pointer-events:none;flex-direction:column;gap:8px;font-size:19px;font-style:italic;line-height:1.6;animation:.6s rise;display:flex;position:absolute;top:0;left:0;right:0}.welcome-sub{opacity:.75;font-size:15px;font-style:normal}.controls{pointer-events:none;opacity:0;background:linear-gradient(to top, var(--bg) 40%, transparent);flex-direction:column;align-items:center;gap:14px;padding:20px 20px 30px;transition:opacity .4s,transform .4s;display:flex;position:fixed;bottom:0;left:0;right:0;transform:translateY(6px)}.controls.visible{opacity:1;transform:translateY(0)}.controls>*{pointer-events:auto}.control-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.mode-toggle{background:var(--surface);border-radius:999px;padding:3px;display:inline-flex}.mode-toggle button{color:var(--ink-soft);font-family:var(--sans);letter-spacing:.2px;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:7px 18px;font-size:13.5px;font-weight:500;transition:color .2s,background-color .2s}.mode-toggle button:hover{color:var(--ink)}.mode-toggle button.active{background:var(--accent-bg);color:var(--ink);box-shadow:var(--shadow)}.instruction-input{background:var(--accent-bg);border:1px solid var(--line);width:340px;max-width:60vw;font-family:var(--sans);color:var(--ink);box-shadow:var(--shadow);border-radius:999px;outline:none;padding:9px 18px;font-size:14px;transition:border-color .2s;animation:.3s rise}.instruction-input::placeholder{color:var(--ink-faint)}.instruction-input:focus{border-color:var(--ink-soft)}.hint-row{justify-content:center;align-items:center;min-height:20px;display:flex}.transform-hint{color:var(--ink-faint);letter-spacing:.4px;cursor:pointer;font-size:13px;transition:color .2s,transform .2s;animation:.3s rise}.transform-hint:hover{color:var(--ink-soft);transform:scale(1.03)}.transform-hint.muted{cursor:default}.error{color:#c0554d;text-align:center;background:#c0554d1a;border-radius:10px;max-width:90vw;padding:8px 16px;font-size:13px}.thinking{gap:5px;display:inline-flex}.thinking .dot{background:var(--ink-soft);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite pulse}.thinking .dot:nth-child(2){animation-delay:.2s}.thinking .dot:nth-child(3){animation-delay:.4s}.writing-pulse{background:var(--ink-faint);border-radius:50%;width:7px;height:7px;animation:1.6s ease-in-out infinite breathe}.corner{z-index:20;position:fixed}.top-left{top:24px;left:26px}.pen-logo{color:var(--ink-faint);opacity:0;align-items:center;gap:9px;transition:opacity .5s;display:flex}.pen-logo.visible{opacity:1}.pen-icon{opacity:0;transition:opacity .5s .15s,transform .3s;display:flex}.pen-icon.visible{opacity:1}.pen-logo:hover .pen-icon{transform:rotate(-8deg)}.pen-text{letter-spacing:.6px;opacity:0;font-size:18px;font-weight:500;transition:opacity .5s}.pen-text.visible{opacity:1}.icon-button{width:44px;height:44px;color:var(--ink-soft);cursor:pointer;opacity:0;z-index:20;background:0 0;border:none;border-radius:12px;justify-content:center;align-items:center;transition:opacity .4s,background-color .2s,transform .15s,color .2s;display:flex;position:fixed}.icon-button.visible{opacity:1}.icon-button:hover{background:var(--surface);color:var(--ink);transform:scale(1.08)}.icon-button:active{transform:scale(.96)}.theme-toggle{top:22px;right:22px}.copy-button{bottom:24px;right:24px}.copy-button.copied{color:#4a9d6f}.gate{background:var(--bg);justify-content:center;align-items:center;height:100vh;display:flex}.gate-form{flex-direction:column;align-items:center;gap:14px;width:260px;animation:.4s rise;display:flex}.gate-title{font-family:var(--serif);color:var(--ink);margin-bottom:6px;font-size:22px}.gate-input{background:var(--accent-bg);border:1px solid var(--line);width:100%;font-family:var(--sans);color:var(--ink);box-shadow:var(--shadow);text-align:center;border-radius:999px;outline:none;padding:10px 18px;font-size:14px;transition:border-color .2s}.gate-input:focus{border-color:var(--ink-soft)}.gate-error{color:#c0554d;text-align:center;font-size:13px}.gate-button{background:var(--ink);width:100%;color:var(--bg);font-family:var(--sans);cursor:pointer;border:none;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:500;transition:opacity .2s}.gate-button:disabled{opacity:.6;cursor:default}.gate-button:not(:disabled):hover{opacity:.85}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}@keyframes breathe{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}@media (width<=640px){.editor{padding:12vh 18px calc(32vh + env(safe-area-inset-bottom))}.result-input{font-size:19px}.draft-input{font-size:17px}.instruction-input{width:100%;max-width:82vw;font-size:16px}.controls{padding:16px 16px calc(20px + env(safe-area-inset-bottom));opacity:1;pointer-events:auto;transform:none}.mode-toggle button{padding:9px 20px;font-size:14px}.transform-hint{font-size:14px}.top-left{top:calc(16px + env(safe-area-inset-top));left:18px}.theme-toggle{top:calc(14px + env(safe-area-inset-top));right:14px}.copy-button{bottom:calc(16px + env(safe-area-inset-bottom));right:16px}.gate-input,.gate-button{font-size:16px}}