:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#282633;background:#fff;font-synthesis:none;--purple:#7561c7;--muted:#8b8797;--border:#eeecf2;--soft:#f6f4fb;--ink:#282633}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button{color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #b7a7f0;outline-offset:4px}input:focus,textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px #7561c713}input,textarea{color:var(--ink);background:#fff;border:1px solid #e3dfeb;border-radius:9px;padding:13px 14px;width:100%;transition:border-color .15s,box-shadow .15s}input::placeholder,textarea::placeholder{color:#aaa5b5}textarea{resize:vertical}label{display:block;font-size:13px;font-weight:550;line-height:1.5}label input,label textarea{margin-top:8px}h1,h2,h3,p{margin:0}.icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}.brand{display:flex;align-items:center;font-size:24px;letter-spacing:-1px;font-weight:750;gap:10px}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--purple);color:#fff;border-radius:11px;font-size:25px;font-weight:500;line-height:1}.brand-period{color:var(--purple);margin-left:-8px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:650;color:#96909e;display:block}.primary,.secondary,.danger{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:8px;min-height:42px;padding:11px 17px;font-weight:550;font-size:13px;transition:background .15s,transform .15s}.primary{background:var(--purple);color:#fff;box-shadow:0 2px 3px #4733870a}.primary:hover{background:#6550b8}.primary:active{transform:translateY(1px)}.primary .icon{width:17px;height:17px}.secondary{background:#f2eff8;color:#62557d}.secondary:hover{background:#e9e4f4}.danger{background:#c2485a;color:#fff}.danger:hover{background:#ad3547}.full{width:100%}.icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:7px;color:#9690a2;padding:5px}.icon-button:hover{background:#eeeaf6;color:var(--purple)}.text-button{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;color:var(--purple);font-size:12px;font-weight:600}.text-button .icon{width:16px;height:16px}.text-button:hover{color:#513b9f}.loading{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;padding:30px;text-align:center}.loading p{color:var(--muted);font-size:14px}.loading h2{font-size:24px}.hidden{display:none!important}
.auth-page{display:grid;grid-template-columns:1.1fr 1fr;min-height:100dvh}.auth-story{background:#f1eef8;padding:38px 55px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-story:after{content:'';position:absolute;width:460px;height:460px;left:-210px;bottom:-290px;border:1px solid #d8d0ed;border-radius:50%;box-shadow:0 0 0 40px #e8e2f455,0 0 0 80px #e8e2f433;pointer-events:none}.story-copy{max-width:510px;margin:auto;padding:70px 0}.story-copy .eyebrow{color:#9182b3;font-size:10px}.story-copy h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(42px,4.5vw,68px);letter-spacing:-2.5px;line-height:1.1;margin:23px 0}.story-copy h1>span{color:var(--purple)}.story-copy>p{font-size:14px;line-height:1.9;color:#8a829b}.notebook-illustration{background:#fff;border:1px solid #e8e2ef;border-radius:12px;box-shadow:0 16px 45px #6a538214;transform:rotate(-3deg);padding:23px 27px;margin:46px 15px 0 0;position:relative;max-width:390px}.notebook-illustration:before{content:'';position:absolute;left:39%;top:-11px;width:85px;height:24px;background:#dbd2edcc;transform:rotate(5deg);border-radius:2px}.paper-label{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#a09aab;padding-bottom:16px;border-bottom:1px solid var(--border)}.paper-label .icon{width:17px;height:17px;color:#b6a5d4}.paper-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #f3f1f5;font-size:13px;color:#5f596b}.paper-row>span{width:20px;height:20px;border:1px solid #dcd6e6;border-radius:6px;font-size:13px;display:flex;align-items:center;justify-content:center}.paper-row.checked{color:#b0a9bb;text-decoration:line-through}.paper-row.checked>span{background:#eee9f8;color:var(--purple);border-color:#eee9f8;text-decoration:none}.paper-footer{font-size:10px;color:#aca4b6;display:flex;justify-content:space-between;padding-top:19px}.paper-footer>span{color:var(--purple);font-size:17px}.story-footer{font-size:10px;color:#9a90ab;display:flex;align-items:center;gap:8px;position:relative;z-index:1}.story-footer .icon{width:12px;height:12px;margin-left:auto}.auth-form-area{display:flex;align-items:center;justify-content:center;position:relative;padding:60px 35px 90px}.auth-card{width:100%;max-width:355px}.small-mark{display:inline-flex;align-items:center;justify-content:center;color:var(--purple);background:#f3effa;width:42px;height:42px;border-radius:12px;flex-shrink:0}.auth-card>.small-mark{margin-bottom:30px}.auth-card h2{font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:400;letter-spacing:-.8px;margin:13px 0}.auth-card>p{font-size:13px;color:#96909e;line-height:1.8;margin-bottom:27px}.auth-card label{margin-bottom:18px}.auth-card input{font-size:13px}.form-error{color:#b33d52;font-size:12px;line-height:1.6;white-space:pre-wrap;margin:8px 0 16px}.form-error:empty{display:none}.auth-card .auth-switch{font-size:12px;text-align:center;margin:22px 0;line-height:1.8}.auth-switch .text-button{font-size:12px}.auth-private{border-top:1px solid var(--border);padding-top:23px;margin-top:29px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;color:#a29aa9}.auth-private .icon{width:13px;height:13px}.auth-bottom{position:absolute;bottom:30px;font-size:10px;letter-spacing:.5px;color:#b4adbb}
.workspace{min-height:100dvh;display:grid;grid-template-columns:clamp(210px,18vw,270px) minmax(0,1fr)}.sidebar{background:#f7f6fa;border-right:1px solid var(--border);padding:32px clamp(14px,1.5vw,24px) 20px;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;width:clamp(210px,18vw,270px);overflow-y:auto;z-index:20}.sidebar .brand{padding:0 8px;font-size:24px}.notebook-label{font-size:9px;letter-spacing:1.5px;color:#aaa3b6;font-weight:650;margin:45px 11px 12px}.notebook-button{border:1px solid #e8e4f0;background:#fff;border-radius:9px;display:flex;align-items:center;gap:9px;min-height:45px;width:100%;padding:10px 12px;font-size:12px;font-weight:550;text-align:left;box-shadow:0 2px 3px #493a6b03}.notebook-button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.notebook-button>.icon{color:#a39ab5;width:17px;height:17px}.notebook-button>.icon:last-child{width:13px}.sidebar-section{display:flex;justify-content:space-between;align-items:center;padding:0 10px;margin:30px 0 10px}.sidebar-section>span{font-size:9px;letter-spacing:1.6px;font-weight:650;color:#a9a1b5}.sidebar-section .icon-button{width:23px;height:23px}.sidebar-section .icon{width:15px;height:15px}.nav-list{width:100%;display:flex;align-items:center;gap:11px;border:0;background:transparent;text-align:left;min-height:43px;padding:10px 13px;border-radius:8px;font-size:.875rem;color:#898092;margin-bottom:5px}.nav-list:hover{background:#efeaf6}.nav-list.selected{background:#eae5f6;color:#6c55af;font-weight:600}.nav-list>span:nth-child(2){overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.nav-list small{font-size:10px;opacity:.75}.list-dot{display:inline-block;width:8px;height:8px;border-radius:3px;flex-shrink:0}.purple{--accent:#8d78cf;--tint:#efebf9}.green{--accent:#72a991;--tint:#eaf4ed}.orange{--accent:#d6a16a;--tint:#fbf1e7}.blue{--accent:#799ec4;--tint:#eaf1f9}.pink{--accent:#c580a5;--tint:#f9edf4}.list-dot{background:var(--accent)}.new-list-button{border:0;background:none;display:flex;align-items:center;gap:10px;color:#a59bac;font-size:12px;padding:12px 13px;text-align:left}.new-list-button .icon{width:16px;height:16px}.new-list-button:hover{color:var(--purple)}.sidebar-bottom{margin-top:auto;padding-top:36px}.together-card{background:#ede8f7;border:1px solid #e5ddf2;border-radius:11px;padding:19px 17px 20px;position:relative;overflow:hidden}.together-card:after{content:'';position:absolute;right:-32px;top:20px;width:100px;height:100px;border:1px solid #ded5ee;border-radius:50%;box-shadow:0 0 0 13px #e4ddf122;pointer-events:none}.card-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:#e2d9f2;color:#8a73b7;border-radius:9px;margin-bottom:13px}.card-icon .icon{width:18px;height:18px}.together-card h3{font-size:14px;line-height:1.5;font-weight:550;letter-spacing:-.25px}.together-card p{font-size:11px;line-height:1.8;color:#a095b0;margin:8px 0 18px}.together-card .text-button{font-size:11px;position:relative;z-index:1}.user-profile{display:flex;align-items:center;gap:10px;background:none;border:0;width:100%;text-align:left;padding:22px 3px 0}.user-profile>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.user-profile strong{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-profile small{font-size:9px;color:#b1a8ba}.user-profile>.icon{width:16px;color:#b0a7b8}.avatar{width:32px;height:32px;border-radius:50%;background:#e8e1f3;color:#9280aa;display:inline-flex;justify-content:center;align-items:center;font-size:10px;flex-shrink:0;position:relative;font-weight:650}.avatar.online:after{content:'';width:7px;height:7px;position:absolute;bottom:0;right:0;border-radius:50%;background:#83b39b;border:2px solid #fff}.avatar:nth-child(2n){background:#e9f0e8;color:#88a082}.avatar:nth-child(3n){background:#f4ebe2;color:#b59a7b}.main-wrap{grid-column:2;min-width:0}.topbar{height:84px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,60px);gap:clamp(10px,1.5vw,20px)}.breadcrumbs{display:flex;flex:1;align-items:center;gap:12px;font-size:.75rem;color:#ada5b5;min-width:0}.breadcrumbs>.icon{width:15px;height:15px}.breadcrumbs>.icon:nth-of-type(2){width:10px;height:10px;color:#c1bac8}.breadcrumbs>span{min-width:0;max-width:clamp(80px,12vw,180px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.breadcrumbs strong{min-width:0;font-weight:450;color:#817688;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.topbar-right{display:flex;align-items:center;gap:clamp(8px,1.25vw,20px);flex-shrink:0}.connection{display:flex;align-items:center;gap:6px;font-size:9px;color:#9ba49f;white-space:nowrap}.connection>span{width:5px;height:5px;border-radius:50%;background:#7cb099;box-shadow:0 0 0 3px #eff6f1}.connection.connecting{color:#baa57b}.connection.connecting>span{background:#c0a26d;box-shadow:0 0 0 3px #f9f4e9}.avatar-group{display:flex;padding-left:5px}.avatar-group .avatar{margin-left:-5px;border:2px solid white;width:29px;height:29px;font-size:8px}.compact{min-height:40px;font-size:.8125rem;padding:9px 12px;gap:7px}.compact>.icon{width:14px;height:14px}.main-content{width:100%;max-width:1280px;margin:0 auto;padding:clamp(28px,3vw,55px) clamp(18px,3vw,65px) 24px;min-height:calc(100dvh - 84px);display:flex;flex-direction:column}.page-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(24px,3vw,48px);gap:20px}.page-intro .eyebrow{font-size:clamp(.625rem,.55rem + .1vw,.75rem);letter-spacing:1.8px;color:#aaa1b3;white-space:nowrap}.page-intro p{font-size:.75rem;color:#b1a9b9;text-align:right;line-height:1.5}.list-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:27px}.list-symbol{display:flex;align-items:center;justify-content:center;border-radius:11px;width:42px;height:42px;background:var(--tint);color:var(--accent);margin-bottom:18px}.list-symbol .icon{width:23px;height:23px}.list-heading h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.75rem,1.25rem + 1.5vw,2.5rem);letter-spacing:-1px;font-weight:400;line-height:1.2;overflow-wrap:anywhere}.list-heading p{font-size:clamp(.8125rem,.75rem + .1vw,.875rem);color:#a298ae;margin-top:11px}.list-controls{padding-top:59px}.progress-panel{background:#faf9fc;border:1px solid #eeebf3;border-radius:10px;padding:14px 18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin-bottom:30px}.progress-panel>div{display:flex;align-items:center;gap:9px}.progress-icon{width:21px;height:21px;background:#f0ecf8;display:inline-flex;justify-content:center;align-items:center;border-radius:50%;color:#a38dc8}.progress-icon>.icon{width:12px;height:12px}#progress-text{font-size:clamp(.8125rem,.75rem + .1vw,.875rem);color:#9990a5}#progress-count{font-size:.8125rem;color:#b0a4bf}progress{appearance:none;display:block;width:100%;height:4px;grid-column:1 / -1;border:0;border-radius:4px;overflow:hidden;background:#ece7f4}progress::-webkit-progress-bar{background:#ece7f4;border-radius:4px}progress::-webkit-progress-value{background:#b7a5d9;border-radius:4px;transition:width .3s}progress::-moz-progress-bar{background:#b7a5d9;border-radius:4px}.task-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin-bottom:23px;gap:15px}.tabs{display:flex;gap:21px}.tab{background:none;border:0;border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;padding:0 0 15px;font-size:clamp(.8125rem,.75rem + .1vw,.875rem);color:#aba2b5;white-space:nowrap}.tab>span{background:#f3f1f7;border-radius:4px;font-size:.75rem;min-width:21px;padding:2px 4px;color:#aaa0b7}.tab.active{color:var(--purple);border-color:#9a83cd;font-weight:600}.tab.active>span{background:#eee7f9;color:#9b82c4}.task-search{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-size:.8125rem;max-width:220px;font-weight:400;color:#b8afc2}.task-search>.icon{width:17px;height:17px}.task-search input{font-size:clamp(.8125rem,.75rem + .1vw,.875rem);border:0;padding:3px 0;margin:0;border-radius:0;min-width:0;box-shadow:none}.task-search kbd{font-size:.75rem;border:1px solid #eee9f2;border-radius:3px;padding:0 4px;color:#c2b9cd}.add-task{border:1px solid #e5dfef;border-radius:9px;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 16px;box-shadow:0 2px 4px #74618904;margin-bottom:17px}.add-task:focus-within{border-color:#b7a7d9;box-shadow:0 0 0 3px #7561c708}.add-symbol{color:#c0b2d0}.add-symbol>.icon{width:18px;height:18px}.add-task>input{border:0;box-shadow:none;font-size:clamp(1rem,.875rem + .25vw,1.125rem);margin:0;padding:8px 0;min-width:0}.add-task>.primary{font-size:clamp(.8125rem,.75rem + .1vw,.875rem);min-height:44px;padding:11px clamp(12px,1vw,18px);white-space:nowrap}.add-task>.primary .icon{width:13px;height:13px}.task-row{display:flex;align-items:center;gap:clamp(12px,.5rem + .4vw,18px);padding:clamp(18px,1rem + .4vw,24px) 8px;border-bottom:1px solid #f1edf5;min-height:clamp(76px,4rem + 1vw,88px);animation:appear .15s ease}.task-checkbox{background:#fff;border:1.5px solid #dcd4e5;width:clamp(24px,1.25rem + .4vw,28px);height:clamp(24px,1.25rem + .4vw,28px);flex-shrink:0;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;padding:2px;color:#aa92c9}.task-checkbox:hover{border-color:#aa92c9;background:#f8f5fc}.task-checkbox .icon{width:75%;height:75%;stroke-width:2}.completed .task-checkbox{background:#eee8f7;border-color:#eee8f7}.task-copy{border:0;background:none;text-align:left;padding:0;min-width:0;flex:1;display:flex;flex-direction:column;gap:7px}.task-title{font-size:clamp(1rem,.875rem + .25vw,1.125rem);line-height:1.6;overflow-wrap:anywhere;color:#605668}.task-note{font-size:clamp(.8125rem,.75rem + .1vw,.875rem);color:#b1a6bb;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;max-height:4.8em;overflow:hidden;display:block}.task-note .icon{width:14px;height:14px;margin-right:5px}.completed .task-title{color:#b6adbf;text-decoration:line-through;text-decoration-color:#cfc6d8}.completed .task-note{opacity:.65}.task-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}.task-author{width:28px;height:28px;font-size:10px;background:#f3eff8;color:#b2a2c3;border-radius:50%;display:flex;align-items:center;justify-content:center}.task-actions .icon-button{opacity:0;width:clamp(32px,1.75rem + .4vw,36px);height:clamp(32px,1.75rem + .4vw,36px)}.task-actions .icon{width:17px;height:17px}.task-row:hover .task-actions .icon-button,.task-row:focus-within .task-actions .icon-button{opacity:1}.empty-tasks{padding:44px 15px 50px;text-align:center}.empty-icon{display:inline-flex;align-items:center;justify-content:center;background:#f6f2fb;color:#c4b3dc;width:48px;height:48px;border-radius:15px;margin-bottom:17px;transform:rotate(-7deg)}.empty-icon>.icon{width:25px;height:25px}.empty-tasks h3{font-size:13px;font-weight:450;color:#9b8ba9}.empty-tasks p{font-size:10px;color:#bbb0c5;margin-top:9px;line-height:1.8}.list-footer{display:flex;align-items:center;justify-content:space-between;padding-top:18px;gap:20px}.list-footer>span{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#bbb1c5}.list-footer>span>.icon{width:11px;height:11px}.list-footer .text-button{font-size:.75rem;color:#a58fbe}.list-footer .text-button>.icon{width:12px;height:12px}.page-footer{display:flex;align-items:center;justify-content:center;gap:15px;font-size:9px;color:#bdb4c6;margin-top:auto;padding-top:64px}.page-footer>span{font-weight:650;color:#a69ab6;font-size:11px}.page-footer .brand-period{margin-left:0}.empty-notebook{text-align:center;padding:100px 20px}.empty-notebook h2{font-family:Georgia,serif;font-size:27px;font-weight:400}.empty-notebook p{font-size:13px;color:var(--muted);margin:15px 0 25px}.sidebar-backdrop,.mobile-toggle{display:none}
dialog{border:1px solid #ece6f3;border-radius:17px;padding:30px;width:calc(100% - 32px);max-width:430px;box-shadow:0 20px 90px #30204026;color:var(--ink);max-height:85dvh;overflow-y:auto}dialog.wide{max-width:540px}dialog::backdrop{background:#25203145;backdrop-filter:blur(3px)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:22px}.modal-head .eyebrow{font-size:8px;color:#b2a5c3;margin-bottom:10px}.modal-head h2{font-family:Georgia,serif;font-weight:400;font-size:27px;letter-spacing:-.6px}.modal-description{font-size:12px;color:#a193ae;line-height:1.9;margin-bottom:23px;overflow-wrap:anywhere}dialog form>label{margin-bottom:19px}dialog input,dialog textarea{font-size:13px}dialog .optional{font-size:10px;color:#b6a9c2;margin-left:6px;font-weight:400}.modal-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px}.danger-quiet{border:0;background:none;color:#b66d7d;font-size:11px;display:inline-flex;align-items:center;gap:7px;padding:4px 0}.danger-quiet>.icon{width:15px;height:15px}.color-picker{padding:0;margin:4px 0 24px;border:0;display:flex;gap:12px}.color-picker legend{font-size:11px;font-weight:550;margin-bottom:12px;color:#a192af}.color-option{display:flex;cursor:pointer}.color-option input{position:absolute;opacity:0;width:1px;height:1px}.color-option span{width:27px;height:27px;border-radius:50%;background:var(--accent);color:transparent;display:flex;align-items:center;justify-content:center;font-size:12px}.color-option input:checked+span{color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--accent)}.color-option input:focus-visible+span{outline:3px solid var(--purple);outline-offset:4px}.inline-input{display:flex;align-items:center;gap:7px;margin-top:8px}.inline-input input{margin:0;min-width:0}.inline-input button{flex-shrink:0;font-size:11px;white-space:nowrap;padding:12px 13px}.member-heading{display:flex;gap:8px;font-size:9px;font-weight:550;letter-spacing:1.4px;color:#a193b1;margin:26px 0 12px}.member-heading>span{color:#c4b8d2}.member{display:flex;align-items:center;gap:12px;border-bottom:1px solid #f3eff7;padding:11px 0}.member-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.member-info strong{font-size:11px;font-weight:500;overflow-wrap:anywhere}.member-info strong>small{font-weight:400;color:#b6a9c4}.member-info>small{font-size:10px;color:#b2a5bf;overflow-wrap:anywhere}.role-badge{font-size:9px;color:#a69ab5;background:#f5f1f9;border-radius:5px;padding:4px 7px}.member .small-mark{width:32px;height:32px;border-radius:50%}.member .small-mark>.icon{width:16px;height:16px}.member .icon-button{width:25px;height:25px}.member .icon-button>.icon{width:15px;height:15px}.modal-footnote{font-size:9px;line-height:1.9;color:#b1a4bf;margin-top:25px;display:flex;align-items:flex-start;gap:7px}.modal-footnote>.icon{width:12px;height:12px;margin-top:2px}.invite-result{margin-top:18px;background:#f7f4fb;padding:16px;border-radius:10px}.invite-result>strong{font-size:11px;font-weight:500;overflow-wrap:anywhere}.invite-result>p{font-size:10px;color:#a195af;margin-top:7px}.invite-result input{font-size:10px}.invite-result .inline-input{margin-top:13px}.sign-out{margin-top:25px;display:flex;justify-content:center;align-items:center;gap:8px;border:0;background:none;font-size:12px;color:#a288aa;width:100%}.sign-out>.icon{width:15px;height:15px}.option-list{display:flex;flex-direction:column;gap:5px}.option-list>button{display:flex;align-items:center;gap:12px;background:#f8f6fb;border:0;border-radius:8px;padding:15px;text-align:left;font-size:12px}.option-list>button>.icon:last-child{margin-left:auto;width:13px;height:13px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);z-index:100;background:#443654;color:#fff;padding:13px 22px;border-radius:10px;font-size:12px;line-height:1.7;box-shadow:0 6px 30px #33244322;max-width:calc(100% - 35px);width:max-content;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}#toast.visible{opacity:1;transform:translate(-50%,0)}#toast.error{background:#8b465a}@keyframes appear{from{opacity:.6}to{opacity:1}}
@media(max-width:1100px){.connection{display:none}.page-intro>p{display:none}.breadcrumbs{gap:8px}.auth-story{padding:35px}.story-footer{font-size:9px;flex-wrap:wrap}.story-footer .icon{margin-left:0}}
@media(max-width:760px){.workspace{display:block}.sidebar{transform:translateX(-100%);transition:transform .2s;width:min(280px,85vw);box-shadow:10px 0 35px #38204315}.nav-open .sidebar{transform:translateX(0)}.nav-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:#2c203b40;z-index:19;border:0}.mobile-toggle{display:inline-flex}.topbar{height:68px;gap:10px}.breadcrumbs{gap:7px;flex:1}.breadcrumbs>span,.breadcrumbs>.icon{display:none}.breadcrumbs strong{max-width:140px}.topbar-right{gap:10px}.topbar-right .compact{padding:8px 10px}.avatar-group .avatar{width:26px;height:26px}.avatar-group .avatar:nth-child(n+3){display:none}.main-content{min-height:calc(100dvh - 68px)}.list-symbol{width:38px;height:38px;margin-bottom:15px}.list-heading{margin-bottom:24px}.progress-panel{margin-bottom:25px}.task-toolbar{flex-wrap:wrap;row-gap:8px}.tabs{gap:clamp(12px,3vw,21px)}.task-search{max-width:180px}.task-actions{gap:5px}.task-actions .icon-button{opacity:1}.task-row{padding-inline:4px}.task-author{display:none}.list-footer{align-items:flex-start}.page-footer{padding-top:50px;gap:9px;font-size:8px}.auth-page{grid-template-columns:1fr}.auth-story{padding:23px 25px 28px}.auth-story .brand{font-size:23px}.story-copy{margin:0;max-width:none;padding:35px 0 0}.story-copy .eyebrow{font-size:8px;letter-spacing:1.5px}.story-copy h1{font-size:42px;letter-spacing:-1.5px;margin:16px 0}.story-copy>p{font-size:12px;line-height:1.7}.notebook-illustration,.story-footer{display:none}.auth-form-area{padding:40px 25px 70px}.auth-card{max-width:400px}.auth-card>.small-mark{display:none}.auth-card h2{font-size:29px}.auth-bottom{bottom:23px}}
@media(max-width:400px){.task-toolbar{column-gap:10px}.task-search{max-width:none;width:100%}.task-search kbd{display:none}.tab{gap:5px}.progress-panel{padding:13px 12px}.add-task{padding-left:11px;gap:7px}.add-task>.primary>.icon{display:none}.avatar-group{display:none}.page-footer{font-size:7px}.inline-input{flex-wrap:wrap}.inline-input input{flex-basis:100%}.inline-input>button{width:100%}dialog{padding:24px}.modal-head h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Theme controls are available both before and after signing in. */
:root { color-scheme: light; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 34px; min-height: 34px; padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: #91839f; flex-shrink: 0; }
.theme-toggle:hover { background: var(--soft); color: var(--purple); }
.theme-toggle .icon { width: 17px; height: 17px; }
[data-theme-icon] { display: inline-flex; }
[data-theme-icon][hidden] { display: none; }
.auth-theme-toggle { position: absolute; top: 28px; right: 30px; padding: 8px 12px; font-size: 11px; }

/* Neutral dark surfaces with readable text and distinct control outlines. */
:root[data-theme="dark"] { color-scheme: dark; color: var(--ink); background: #212121; --ink: #f3f3f3; --purple: var(--action); --muted: #b9b9b9; --border: #414141; --soft: #303030; --surface: #282828; --surface-hover: #393939; --control-border: #8f8f8f; --action: #f9f9f9; --on-accent: #0d0d0d; --focus-ring: #cdcdcd; }
[data-theme="dark"] .story-copy h1, [data-theme="dark"] .auth-card h2, [data-theme="dark"] .list-heading h1, [data-theme="dark"] .empty-notebook h2, [data-theme="dark"] .modal-head h2 { font-family: inherit; font-weight: 600; letter-spacing: -.025em; }
[data-theme="dark"] input, [data-theme="dark"] textarea { background: var(--soft); border-color: var(--control-border); color: var(--ink); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px #ffffff1a; }
[data-theme="dark"] button:focus-visible, [data-theme="dark"] a:focus-visible { outline-color: var(--focus-ring); }
[data-theme="dark"] .brand-mark, [data-theme="dark"] .primary { background: var(--action); color: var(--on-accent); }
[data-theme="dark"] .primary, [data-theme="dark"] .secondary { border-radius: 999px; }
[data-theme="dark"] .primary:hover { background: #dfdfdf; }
[data-theme="dark"] .secondary { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .secondary:hover { background: var(--surface-hover); }
[data-theme="dark"] .icon-button { color: #cdcdcd; }
[data-theme="dark"] .icon-button:hover { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .text-button:hover { color: #fff; }
[data-theme="dark"] .eyebrow, [data-theme="dark"] .notebook-label, [data-theme="dark"] .sidebar-section>span { color: var(--muted); }
[data-theme="dark"] .sidebar { background: #181818; }
[data-theme="dark"] .notebook-button { background: var(--surface); border-color: var(--control-border); }
[data-theme="dark"] .notebook-button>.icon { color: #cdcdcd; }
[data-theme="dark"] .nav-list { color: #cdcdcd; }
[data-theme="dark"] .nav-list small { opacity: 1; }
[data-theme="dark"] .nav-list:hover { background: var(--soft); }
[data-theme="dark"] .nav-list.selected { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .new-list-button { color: #cdcdcd; }
[data-theme="dark"] .new-list-button:hover { color: #fff; }
[data-theme="dark"] .together-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .together-card:after, [data-theme="dark"] .auth-story:after { display: none; }
[data-theme="dark"] .card-icon { background: var(--surface-hover); color: var(--ink); }
[data-theme="dark"] .together-card p, [data-theme="dark"] .user-profile small { color: var(--muted); }
[data-theme="dark"] .user-profile>.icon { color: #cdcdcd; }
[data-theme="dark"] .avatar { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .avatar:nth-child(2n) { background: var(--surface-hover); color: var(--ink); }
[data-theme="dark"] .avatar:nth-child(3n) { background: #414141; color: var(--ink); }
[data-theme="dark"] .avatar-group .avatar, [data-theme="dark"] .avatar.online:after { border-color: #212121; }
[data-theme="dark"] .avatar.online:after { background: #40c977; }
[data-theme="dark"] .topbar { background: #212121; }
[data-theme="dark"] .breadcrumbs { color: var(--muted); }
[data-theme="dark"] .breadcrumbs strong { color: var(--ink); }
[data-theme="dark"] .breadcrumbs>.icon:nth-of-type(2) { color: var(--muted); }
[data-theme="dark"] .connection { color: #8cdfad; }
[data-theme="dark"] .connection>span { background: #40c977; box-shadow: 0 0 0 3px #04b84c26; }
[data-theme="dark"] .connection.connecting { color: #ffb790; }
[data-theme="dark"] .connection.connecting>span { background: #ffb790; box-shadow: 0 0 0 3px #fb6a2226; }
[data-theme="dark"] .page-intro .eyebrow, [data-theme="dark"] .page-intro p, [data-theme="dark"] .list-heading p { color: var(--muted); }
[data-theme="dark"] .purple { --accent: #cdcdcd; --tint: var(--soft); }
[data-theme="dark"] .green { --accent: #8cdfad; --tint: var(--soft); }
[data-theme="dark"] .orange { --accent: #ffb790; --tint: var(--soft); }
[data-theme="dark"] .blue { --accent: #99ceff; --tint: var(--soft); }
[data-theme="dark"] .pink { --accent: #ffbada; --tint: var(--soft); }
[data-theme="dark"] .progress-panel { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .progress-icon { background: var(--surface-hover); color: var(--ink); }
[data-theme="dark"] #progress-text, [data-theme="dark"] #progress-count { color: #cdcdcd; }
[data-theme="dark"] progress, [data-theme="dark"] progress::-webkit-progress-bar { background: #4f4f4f; }
[data-theme="dark"] progress::-webkit-progress-value { background: #cdcdcd; }
[data-theme="dark"] progress::-moz-progress-bar { background: #cdcdcd; }
[data-theme="dark"] .tab { color: #cdcdcd; }
[data-theme="dark"] .tab>span { background: var(--soft); color: #cdcdcd; }
[data-theme="dark"] .tab.active { color: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .tab.active>span { background: var(--surface-hover); color: var(--ink); }
[data-theme="dark"] .task-search { color: #cdcdcd; }
[data-theme="dark"] .task-search input, [data-theme="dark"] .add-task>input { background: transparent; border: 0; box-shadow: none; }
[data-theme="dark"] .task-search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 5px; border-radius: 3px; }
[data-theme="dark"] .task-search kbd { border-color: var(--control-border); color: var(--muted); }
[data-theme="dark"] .add-task { background: var(--soft); border-color: var(--control-border); border-radius: 24px; }
[data-theme="dark"] .add-task:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px #ffffff1a; }
[data-theme="dark"] .add-symbol { color: #cdcdcd; }
[data-theme="dark"] .task-row { border-color: var(--border); }
[data-theme="dark"] .task-checkbox { background: var(--surface); border-color: var(--control-border); color: var(--ink); }
[data-theme="dark"] .task-checkbox:hover { background: var(--surface-hover); border-color: var(--ink); }
[data-theme="dark"] .completed .task-checkbox { background: var(--action); border-color: var(--action); color: var(--on-accent); }
[data-theme="dark"] .task-title { color: var(--ink); }
[data-theme="dark"] .task-note { color: var(--muted); }
[data-theme="dark"] .completed .task-title { color: var(--muted); text-decoration-color: var(--muted); }
[data-theme="dark"] .completed .task-note { opacity: 1; }
[data-theme="dark"] .task-author { background: var(--soft); color: #cdcdcd; }
[data-theme="dark"] .empty-icon, [data-theme="dark"] .small-mark { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .empty-tasks h3 { color: var(--ink); }
[data-theme="dark"] .empty-tasks p, [data-theme="dark"] .list-footer>span, [data-theme="dark"] .page-footer { color: var(--muted); }
[data-theme="dark"] .list-footer .text-button, [data-theme="dark"] .page-footer>span { color: #cdcdcd; }
[data-theme="dark"] dialog { background: var(--surface); border-color: var(--control-border); box-shadow: 0 20px 90px #0008; }
[data-theme="dark"] dialog::backdrop { background: #0009; }
[data-theme="dark"] .modal-head .eyebrow, [data-theme="dark"] .modal-description, [data-theme="dark"] dialog .optional, [data-theme="dark"] .color-picker legend { color: var(--muted); }
[data-theme="dark"] .color-option input:checked+span { color: var(--on-accent); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--accent); }
[data-theme="dark"] .member-heading, [data-theme="dark"] .member-info>small, [data-theme="dark"] .member-info strong>small, [data-theme="dark"] .modal-footnote { color: var(--muted); }
[data-theme="dark"] .member { border-color: var(--border); }
[data-theme="dark"] .member-heading>span { color: var(--muted); }
[data-theme="dark"] .role-badge, [data-theme="dark"] .invite-result, [data-theme="dark"] .option-list>button { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .invite-result>p { color: var(--muted); }
[data-theme="dark"] .danger-quiet, [data-theme="dark"] .sign-out, [data-theme="dark"] .form-error, [data-theme="dark"] .option-list>.danger-quiet { color: #ff8583; }
[data-theme="dark"] .danger { background: #ba2623; color: #fff; }
[data-theme="dark"] .danger:hover { background: #911e1b; }
[data-theme="dark"] #toast { background: var(--soft); color: var(--ink); border: 1px solid var(--control-border); }
[data-theme="dark"] #toast.error { background: #4d100e; color: #fff; }
[data-theme="dark"] .auth-story { background: #181818; }
[data-theme="dark"] .story-copy .eyebrow, [data-theme="dark"] .story-copy>p, [data-theme="dark"] .story-footer { color: var(--muted); }
[data-theme="dark"] .notebook-illustration { background: var(--surface); border-color: var(--border); box-shadow: 0 16px 45px #0003; }
[data-theme="dark"] .notebook-illustration:before { background: #5d5d5dcc; }
[data-theme="dark"] .paper-label { color: var(--muted); }
[data-theme="dark"] .paper-label .icon { color: #cdcdcd; }
[data-theme="dark"] .paper-row { color: var(--ink); border-color: var(--border); }
[data-theme="dark"] .paper-row>span { border-color: var(--control-border); }
[data-theme="dark"] .paper-row.checked { color: var(--muted); }
[data-theme="dark"] .paper-row.checked>span { background: var(--action); border-color: var(--action); color: var(--on-accent); }
[data-theme="dark"] .paper-footer { color: var(--muted); }
[data-theme="dark"] .auth-card>p, [data-theme="dark"] .auth-private, [data-theme="dark"] .auth-bottom { color: var(--muted); }
[data-theme="dark"] .theme-toggle { color: var(--ink); border-color: var(--control-border); }
@media(max-width:760px) { .auth-theme-toggle { top: 16px; right: 20px; } .auth-form-area { padding-top: 65px; } .topbar-right { gap: 8px; } }