:root { color-scheme: dark; font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; background: #030405; color: #89908f; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #030405; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; }
button { background: transparent; color: #89908f; border: 0; padding: 10px 12px; cursor: pointer; }
button:hover, button:focus-visible { color: #d1d6d3; }
button:disabled { opacity: .4; cursor: wait; }
button:focus-visible, input:focus-visible { outline: 1px solid #626f66; outline-offset: 3px; }
#auth { min-height: 100dvh; display: grid; place-items: center; padding: 48px 24px; }
#auth-form { position: relative; width: min(290px, 78vw); display: grid; gap: 32px; }
#auth input { width: 100%; height: 49px; color: #c2c8c3; background: transparent; border: 0; border-bottom: 1px solid #66736a; padding: 12px 3px 10px; border-radius: 0; font-size: 16px; font-weight: 400; letter-spacing: .08em; transition: border-color .2s; }
#auth input::placeholder { color: #7d8980; }
#auth input:focus { outline: none; border-bottom-color: #c0cfc4; }
#auth input:-webkit-autofill { -webkit-text-fill-color: #c2c8c3; box-shadow: 0 0 0 1000px #030405 inset; caret-color: #c2c8c3; }
#auth-submit { justify-self: center; width: 48px; height: 48px; padding: 0; margin-top: 8px; border: 1px solid #95a69b; border-radius: 50%; transition: border-color .2s, background .2s; }
#auth-submit:hover { border-color: #e0e9e2; background: #b9d1c40a; }
#auth-submit:disabled { opacity: .45; }
#auth-switch { position: absolute; top: calc(100% + 35px); left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; color: #7c8c80; }
#auth-switch svg { width: 30px; height: 30px; }
#auth-switch:hover, #auth-switch[aria-pressed="true"] { color: #becdc1; }
#auth-form.has-error input, #auth-form.has-error #auth-submit { border-color: #c18e86; }
#auth-error { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#auth-error:empty { display: none; }
#space { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }
#ink, #words { position: absolute; inset: 0; width: 100%; height: 100%; }
#ink { touch-action: none; }
#words { pointer-events: none; overflow: hidden; }
#writer, .word { font-family: "SimHei", "Heiti SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); }
#writer { position: absolute; left: 50%; top: 45%; transform: translateX(-50%); width: min(520px, 72vw); max-height: 40dvh; padding: 0; border: 0; outline: none; resize: none; background: transparent; color: #b8f0dc; line-height: 1.7; caret-color: #d8eee0; overflow: auto; }
#writer.custom-caret { caret-color: transparent; }
#writer-caret { position: absolute; width: 3px; border-radius: 1px; background: #edf4e8; box-shadow: 0 0 6px #dcebd066; pointer-events: none; animation: caret-pulse 1.15s ease-in-out infinite; }
#caret-mirror { position: fixed; top: 0; left: -10000px; visibility: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; margin: 0; border: 0; padding: 0; }
@keyframes caret-pulse { 0%, 45%, 100% { opacity: 1; } 65%, 80% { opacity: .3; } }
.word { position: absolute; width: min(520px, 72vw); transform: translateX(-50%); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.word.saved { animation: dissolve 3.8s ease-in forwards; }
.word.failed { opacity: .8; text-decoration: underline dotted #84564f; text-underline-offset: 8px; }
@keyframes dissolve { 0% { opacity: .95; filter: blur(0); } 45% { opacity: .6; filter: blur(1.4px); } 100% { opacity: 0; filter: blur(12px); } }
#ai-voice { position: absolute; width: min(620px, 80vw); color: #e0e5df; opacity: .94; font-size: clamp(21px, 2vw, 25px); line-height: 1.85; text-align: center; white-space: normal; overflow-wrap: anywhere; overflow: auto; scrollbar-width: none; filter: blur(.2px); touch-action: pan-y; transition: opacity 2.5s, filter 2.5s; }
#ai-voice::-webkit-scrollbar { display: none; }
#ai-voice.appearing { animation: voice-arrive 1.1s ease-out both; }
@keyframes voice-arrive { from { opacity: 0; filter: blur(2px); } to { opacity: .94; filter: blur(.2px); } }
#ai-voice.fading { opacity: 0; filter: blur(9px); }
#tools { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; flex-wrap: wrap; justify-content: end; max-width: 92vw; opacity: .55; }
#tools:hover, #tools:focus-within { opacity: 1; }
#tools button { font-size: 12px; padding: 9px; }
#status { position: absolute; left: 22px; bottom: max(21px, env(safe-area-inset-bottom)); font-size: 11px; color: #626a61; pointer-events: none; max-width: 75vw; }
#retry-button { position: absolute; right: 16px; bottom: max(12px, env(safe-area-inset-bottom)); font-size: 12px; }
dialog { width: min(620px, 92vw); max-height: 80dvh; padding: 25px; background: #0b0e0df2; color: #a2aca4; border: 1px solid #232b26; border-radius: 16px; box-shadow: 0 20px 80px #000a; scrollbar-width: thin; }
dialog::backdrop { background: #0009; backdrop-filter: blur(7px); }
dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
h2 { font-size: 17px; font-weight: 400; margin: 0; }
article { padding: 18px 0; border-top: 1px solid #202721; }
article p { line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
article small, .empty { color: #69756a; font-size: 12px; }
article h3 { font-size: 15px; font-weight: 400; }
.plan-summary { color: #bbc7bd; font-size: 14px; }
.plan-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan-heading h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.plan-exports { position: relative; flex: none; display: flex; gap: 3px; }
.export-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: #9eb8aa; border-radius: 10px; }
.export-icon:hover, .export-icon:focus-visible { color: #e1f5e9; background: #7eae9420; }
.export-icon svg { width: 24px; height: 24px; }
.export-json { font-family: ui-monospace, monospace; font-size: 15px; padding: 4px; }
.export-error { position: absolute; top: 100%; right: 0; color: #d4a8a0; font-size: 11px; white-space: nowrap; }
.task-parent { display: block; margin-top: 18px; color: #9cae9e; }
.task-record { border-top: 1px solid #202721; }
.task-record summary { padding: 18px 4px; cursor: pointer; overflow-wrap: anywhere; }
.task-record summary span { color: #c1cbc3; }
.task-record summary small { display: block; margin: 9px 0 0 17px; color: #79897d; font-size: 12px; }
.task-record[open] > summary { color: #e0e8e2; }
.task-record > div { padding: 0 8px 12px; }
.task-record > div > p { line-height: 1.8; }
dialog.plans-view { width: min(860px, 94vw); }
.plan-timeline { list-style: none; margin: 28px 0 4px; padding: 0; }
.plan-node { position: relative; padding: 0 0 30px 42px; min-width: 0; }
.plan-node::before { content: ""; position: absolute; top: 23px; bottom: 0; left: 11px; width: 1px; background: linear-gradient(#62796980, #3c544b80); }
.plan-node:last-child { padding-bottom: 4px; }
.plan-node:last-child::before { display: none; }
.node-index { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #708777; border-radius: 50%; background: #101913; color: #d2dfd4; font-size: 11px; }
.node-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 28px; }
.node-layout.has-time { grid-template-columns: minmax(0, 1fr) minmax(100px, 31%); }
.node-copy, .node-times { min-width: 0; overflow-wrap: anywhere; }
.node-title { color: #e0e9e2; font-size: 17px; line-height: 1.5; font-weight: 700; margin: 0; }
.node-copy .node-details { color: #a6b5aa; font-size: 13px; margin: 7px 0 0; line-height: 1.7; }
.node-origin, .node-location, .node-prerequisites, .node-suggested { display: block; font-size: 11px; line-height: 1.7; margin-top: 5px; }
.node-origin { margin: 0 0 5px; color: #819b87; }
.node-suggested { color: #7f9988; }
.node-todos { list-style: none; padding: 0 0 0 14px; margin: 15px 0 0; border-left: 1px solid #354a3c; }
.node-todo { position: relative; margin: 0 0 13px; }
.node-todo:last-child { margin-bottom: 0; }
.node-todo::before { content: ""; position: absolute; left: -18px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #839b89; }
.todo-title { color: #c5d0c7; font-size: 13px; line-height: 1.6; }
.todo-suggested { color: #7f9988; font-size: 10px; margin-left: 8px; }
.node-todo .todo-details { margin: 4px 0 0; color: #829087; font-size: 12px; line-height: 1.7; }
.node-times { text-align: right; padding-top: 2px; }
.node-time + .node-time { margin-top: 12px; }
.node-time .time-label { display: block; color: #7e9385; font-size: 10px; margin-bottom: 4px; }
.time-value { color: #c3d2c7; font-size: 12px; line-height: 1.65; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { #tools button { padding: 9px 7px; } #writer, .word { font-size: 25px; width: 78vw; } #ai-voice { top: 19%; font-size: 21px; } dialog { padding: 20px; } }
@media (max-width: 480px) { .plan-node { padding-left: 33px; } .node-layout { gap: 10px; } .node-layout.has-time { grid-template-columns: minmax(0, 1fr) minmax(82px, 36%); } .node-title { font-size: 15px; } .time-value { font-size: 11px; } .node-todos { padding-left: 11px; } .node-todo::before { left: -15px; } }
@media (max-height: 520px) { #auth { padding: 28px 24px 110px; } #auth-form { gap: 20px; } #auth-switch { top: calc(100% + 16px); } }
@media (prefers-reduced-motion: reduce) { .word.saved { animation-duration: .2s; } #ai-voice { transition-duration: .2s; } #ai-voice.appearing { animation-duration: .1s; } #writer-caret { animation: none; } }