:root{
 --ink:#eee6db;--muted:#b9b0a4;--paper:#1d1a17;--paper2:#27231e;--line:#403a33;
 --accent:#789e91;--accent2:#c09373;--soft:#312c26;--good:#65a18c;--warn:#c7955f;--danger:#c46a60;
 --side:#151310;--sideText:#f2eadf;--sideMuted:#948a7e;--input:#2a2621;--shadow:0 10px 30px rgba(0,0,0,.42);
 --serif:Georgia,serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 --red:#c45a4f;--blue:#5678a6;--green:#6f8a63;--yellow:#d3b04b;--purple:#7c638f;
}
.light-mode{color-scheme:light;--ink:#28231d;--muted:#756d62;--paper:#f3ede2;--paper2:#fffdf8;--line:#d8cfc1;--accent:#315b4f;--accent2:#80543d;--soft:#eee6da;--good:#2f6b58;--warn:#8a5a2b;--danger:#8c3d36;--side:#231f1a;--sideText:#f8f3e8;--sideMuted:#aaa093;--input:#fffdfa;--shadow:0 10px 30px rgba(44,35,24,.08)}
*{box-sizing:border-box} html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--sans);color:var(--ink);background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 85%,#000));min-height:100vh}
body.public-mode .shell{display:block;min-height:100vh}body.public-mode .side,body.public-mode .topbar,body.public-mode .drawer-backdrop{display:none !important}body.public-mode .main{padding:48px 18px 42px;max-width:920px;margin:0 auto}body.public-mode .view:not([data-view-panel="home"]){display:none !important}body.public-mode [data-view-panel="home"] .learning-panels{display:none !important}body.public-mode [data-view-panel="home"]{max-width:860px}body.public-mode .app-footer{display:none !important}html.public-test,html.public-test body{background:#fffaf1 !important;color-scheme:light}html.public-test body{color:#282725}
button,input,textarea,select{font:inherit} button{cursor:pointer;color:inherit} button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.shell{display:grid;grid-template-columns:242px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);color:var(--sideText);padding:25px 17px;position:sticky;top:0;height:100vh;overflow:auto;z-index:40}
.brand{padding:0 9px 19px;border-bottom:1px solid rgba(255,255,255,.12)} .brand .eyebrow{font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:#d0c4b5}.brand h1{font:500 1.52rem/1.15 var(--serif);margin:8px 0 5px}.brand p{margin:0;color:#bdb3a7;font-size:.82rem;line-height:1.42}
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:12px 7px 3px;width:calc(100% - 14px);padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}.mode-toggle button{border:0;border-radius:8px;background:transparent;color:var(--muted);padding:8px 7px;font-size:.73rem;font-weight:700;line-height:1.15;text-align:center}.mode-toggle button.active-mode{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.16)}.side .mode-toggle{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}.side .mode-toggle button{color:#bfb5a7}.side .mode-toggle button.active-mode{background:#d7b980;color:#211d18}.mode-note{font-size:.73rem;color:var(--muted);margin:7px 2px 0;line-height:1.35}
.nav{display:grid;gap:4px;padding:14px 0}.nav-row{display:flex;align-items:center;gap:4px}.nav button[data-view]{border:0;background:transparent;color:#ddd4c8;text-align:left;padding:10px 11px;border-radius:9px;display:flex;gap:9px;align-items:center;width:100%}.nav button[data-view]:hover,.nav button.active{background:#38322b;color:white}.nav .dot{width:7px;height:7px;border-radius:50%;background:#8b8174}.nav button.active .dot{background:#d7b980}
.nav details{border-top:1px solid rgba(255,255,255,.07);padding-top:5px;margin-top:4px}.nav summary{list-style:none;color:#aaa093;font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 11px;cursor:pointer;display:flex;align-items:center}.nav summary::-webkit-details-marker{display:none}.nav summary::after{content:'›';margin-left:auto;font-size:1rem}.nav details[open] summary::after{transform:rotate(90deg)}
.beginner-nav{display:none}.beginner-mode .beginner-nav{display:grid}.beginner-mode .full-nav{display:none}.side-foot{font-size:.72rem;color:var(--sideMuted);line-height:1.5;padding:13px 9px}
.help-dot{width:16px;height:16px;min-width:16px;border-radius:50%;border:1px solid currentColor;display:inline-grid;place-items:center;color:#b7ada0;font-size:10px;font-weight:800;line-height:1;position:relative;cursor:help;user-select:none}.help-dot::after{display:none!important}#helpTooltip{position:fixed;z-index:99999;width:min(285px,calc(100vw - 24px));padding:9px 10px;border-radius:9px;background:#f5eee3;color:#211d18;border:1px solid #6d6256;font-size:.75rem;font-weight:500;line-height:1.42;text-align:left;box-shadow:0 12px 32px rgba(0,0,0,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s ease}#helpTooltip.show{opacity:1;visibility:visible}
.main{padding:28px 34px 58px;min-width:0}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 auto 22px;max-width:1180px;flex-wrap:wrap}.topbar h2{font:500 2rem/1.1 var(--serif);margin:0 0 5px;cursor:default;user-select:none}.topbar p{margin:0;color:var(--muted)}.topbar-actions{display:flex;gap:8px;align-items:center}.privacy-pill{padding:8px 11px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper2) 92%,transparent);border-radius:999px;color:var(--muted);font-size:.78rem;white-space:nowrap}
.view{display:none;max-width:1180px;margin:auto}.view.active{display:block}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:color-mix(in srgb,var(--paper2) 94%,transparent);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);min-width:0}.flat{box-shadow:none}.card h3,.card h4{font-family:var(--serif);font-weight:500}.card h3{font-size:1.2rem;margin:0 0 8px}.card h4{font-size:1.02rem;margin:0 0 6px}.card p,.card li{color:var(--muted);line-height:1.55}.muted{color:var(--muted)}.tiny{font-size:.78rem}.kicker{color:var(--accent2);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:750}
.btn{border:1px solid var(--line);background:var(--paper2);padding:10px 13px;border-radius:10px;color:var(--ink)}.btn:hover{background:var(--soft)}.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.btn.ghost{background:transparent}.btn.small{padding:7px 9px;font-size:.8rem}.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;padding:4px 7px;border-radius:999px;background:var(--soft);color:var(--muted)}.tag.good{color:var(--good)}.tag.warn{color:var(--warn)}
.section-head{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;margin:5px 0 14px;flex-wrap:wrap}.section-head h3{font:500 1.35rem var(--serif);margin:0}.section-head p{margin:4px 0 0;color:var(--muted);font-size:.88rem}.search{width:min(330px,100%);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--input);color:var(--ink)}
label{font-size:.79rem;font-weight:680;display:block;margin:0 0 6px} input[type=text],input[type=date],input[type=number],input[type=search],input[type=password],textarea,select{width:100%;border:1px solid var(--line);background:var(--input);border-radius:10px;padding:10px 11px;color:var(--ink);font-size:16px} textarea{min-height:102px;resize:vertical;line-height:1.48}.field{min-width:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.field.full{grid-column:1/-1}.sep{height:1px;background:var(--line);margin:16px 0}
.beginner-how{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:10px;background:var(--soft);margin:0 0 14px}.beginner-how strong{white-space:nowrap}.beginner-how span{color:var(--muted);font-size:.82rem;line-height:1.45;min-width:0;overflow-wrap:anywhere}.empty{padding:26px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:13px}.result{border-left:4px solid var(--accent);padding:14px 15px;background:var(--soft);border-radius:0 10px 10px 0;line-height:1.55}.notice{font-size:.82rem;padding:11px 12px;border-radius:10px;background:var(--soft);color:var(--muted);line-height:1.48}.danger-note{border-left:4px solid var(--danger)}

.color-stage{background:#fffaf1;color:#282725;border:3px solid #3f3b36;border-radius:28px;padding:clamp(27px,5vw,42px) clamp(27px,5vw,42px) clamp(50px,6vw,64px);box-shadow:0 16px 38px rgba(0,0,0,.16),inset 0 0 0 7px #fffaf1,inset 0 0 0 9px #3f3b36;position:relative;overflow:hidden}.color-stage .corner{position:absolute;width:62px;height:62px;pointer-events:none}.color-stage .tl{top:13px;left:13px}.color-stage .tr{top:13px;right:13px;transform:rotate(90deg)}.color-stage .br{right:13px;bottom:8px;transform:rotate(180deg)}.color-stage .bl{left:13px;bottom:8px;transform:rotate(270deg)}.corner .arc{position:absolute;inset:0;border-top:4px solid #3f3b36;border-left:4px solid #3f3b36;border-top-left-radius:16px}.corner .chips{position:absolute;top:9px;left:12px;display:flex;gap:4px}.corner .chips span{width:8px;height:8px;border-radius:2px}.c-red{background:var(--red)}.c-blue{background:var(--blue)}.c-green{background:var(--green)}.c-yellow{background:var(--yellow)}.c-purple{background:var(--purple)}
.zone-key{position:absolute;left:0;width:100%;border:0;background:transparent;padding:0;cursor:default;z-index:2;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.zone-key.top{top:0;height:74px}.zone-key.bottom{bottom:-48px;height:48px}.public-app-title{position:relative;z-index:6;pointer-events:none;text-align:center;margin:0 auto 12px;color:#544d46;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;font-weight:760}.color-breathing-space{height:0;pointer-events:none}.unlock-test{position:relative;z-index:7;pointer-events:auto;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;margin:0;cursor:default;-webkit-tap-highlight-color:transparent}.unlock-test:focus{outline:none}.color-title{text-align:center;margin:10px auto 8px;max-width:720px;font:700 clamp(1.9rem,4.5vw,3.2rem)/1.08 var(--sans);letter-spacing:-.035em}.color-sub{text-align:center;margin:0 0 16px;color:#736d66;font-size:clamp(1rem,2vw,1.15rem)}.color-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(7px,1.6vw,13px);margin:5px auto 57px;max-width:760px}.color-choice{position:relative;padding-top:74px}.swatch{aspect-ratio:4/5;border-radius:17px;border:1px solid rgba(0,0,0,.12);box-shadow:0 5px 14px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.18)}.red{background:var(--red)}.blue{background:var(--blue)}.green{background:var(--green)}.yellow{background:var(--yellow)}.purple{background:var(--purple)}.why-btn{display:block;width:min(720px,calc(100% - 28px));margin:auto;border:0;border-radius:15px;padding:17px 20px;background:#292826;color:white;font-weight:760;font-size:1.08rem}.color-hint{text-align:center;color:#7d766f;font-size:.8rem;margin:10px 0 0}.color-result{display:none;max-width:760px;margin:24px auto 0;padding-top:22px;border-top:1px solid #d8d1c7;scroll-margin-top:18px}.color-result.show{display:block}.maybe{font-size:.82rem;color:#736d66;font-weight:700;margin:0 0 8px}.reading-copy{font:400 clamp(1.12rem,2.2vw,1.4rem)/1.62 Georgia,serif;margin:0}.color-reveal{text-align:center;margin-top:22px;padding-top:18px;opacity:0;transition:.35s}.color-reveal.show{opacity:1}.color-dot{display:inline-block;width:48px;height:48px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}.color-footer{text-align:center;color:#817a72;font-size:.74rem;margin-top:14px}

.list{display:grid;gap:10px}.item{border:1px solid var(--line);background:var(--paper2);border-radius:13px;padding:15px}.item-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.item p{margin:6px 0}.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.focus-badge{display:inline-flex;font-size:.69rem;padding:4px 7px;border-radius:999px;background:var(--soft);color:var(--accent)}
.library-tools{display:grid;grid-template-columns:minmax(0,1fr) 190px 190px;gap:10px;margin:12px 0}.source-list{display:grid;gap:10px}.source-item{border:1px solid var(--line);border-radius:13px;background:var(--paper2);overflow:hidden}.source-item>summary{list-style:none;cursor:pointer;padding:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.source-item>summary::-webkit-details-marker{display:none}.source-body{border-top:1px solid var(--line);padding:16px}.source-body h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 0 5px}.source-body h5:first-child{margin-top:0}.source-body p{margin:0 0 8px}.source-link{color:var(--accent)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.choice{border:1px solid var(--line);background:var(--paper2);border-radius:12px;padding:13px;text-align:left}.choice:hover{border-color:var(--accent)}.choice.correct{border-color:var(--good);box-shadow:0 0 0 1px var(--good)}.choice.wrong{border-color:var(--danger)}
.timer-box{border:1px solid var(--line);background:var(--paper2);border-radius:12px;padding:13px;margin-top:14px}.timer-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.timer-display{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.7rem}.timer-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.practice-plan{display:grid;gap:9px;margin-top:12px}.practice-step{padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--paper2)}.practice-step.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 16%,transparent)}.practice-step.done{opacity:.62}.metric{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.metric strong{font:500 2rem var(--serif)}.metric span{font-size:.77rem;color:var(--muted)}
.callout{background:#29241f;color:#f7f1e7;border-radius:15px;padding:21px}.callout p{color:#d1c7ba}.callout .prompt{font:400 1.25rem/1.45 var(--serif);color:white;margin:8px 0 0}.redflags{display:grid;gap:8px}.redflag{padding:12px;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--danger) 7%,var(--paper2))}.redflag b{display:block;margin-bottom:4px}.redflag span{color:var(--muted);font-size:.84rem;line-height:1.45}
.spoken-practice{margin-top:10px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--accent) 8%,var(--paper2))}.spoken-practice b{display:block;margin-bottom:5px}.spoken-practice p{margin:4px 0;color:var(--ink)}.build-edit{display:grid;gap:10px;margin-top:12px}.build-edit textarea{min-height:74px}.word-count{font-size:.76rem;color:var(--muted);margin-top:6px}.empty .actions{justify-content:center}.carry-line{margin-bottom:12px}.trim-box{margin-top:12px}.trim-box textarea{min-height:118px}.trim-feedback{margin-top:10px}.journal-entry{padding:13px 0;border-top:1px solid var(--line)}.journal-entry:first-child{border-top:0}.journal-entry time{font-size:.72rem;color:var(--muted)}.guide-list{display:grid;gap:10px}.guide-section{border:1px solid var(--line);border-radius:13px;background:var(--paper2)}.guide-section>summary{list-style:none;cursor:pointer;padding:15px 17px;font:500 1.06rem var(--serif);display:flex;align-items:center}.guide-section>summary::after{content:'+';margin-left:auto}.guide-section[open]>summary::after{content:'−'}.guide-inside{padding:0 17px 17px}.guide-tool{padding:11px 0;border-top:1px solid var(--line)}.guide-tool:first-child{border-top:0}.quick-start-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:14px}.quick-start-card{border:1px solid var(--line);border-radius:13px;background:var(--paper2);padding:16px;display:flex;flex-direction:column;min-height:0}.quick-start-card h4{margin:0 0 7px}.quick-start-card p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.5;flex:1}.quick-start-card .actions{margin-top:12px}.guide-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.guide-path .notice{height:100%}.guide-callout{padding:14px;border-radius:12px;background:var(--soft);color:var(--muted);line-height:1.5;margin-top:12px}.guide-callout b{color:var(--ink)}
.toast{position:fixed;right:20px;bottom:20px;background:#24201b;color:white;padding:11px 14px;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:.18s;z-index:90}.toast.show{opacity:1}
dialog{border:1px solid var(--line);border-radius:16px;padding:0;box-shadow:0 24px 70px rgba(0,0,0,.28);width:min(720px,calc(100% - 28px));background:var(--paper2);color:var(--ink)}dialog::backdrop{background:rgba(15,13,11,.6)}.modal{padding:22px}.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.iconbtn{border:0;background:transparent;font-size:1.3rem;padding:7px 10px}
.mobile-menu-toggle,.drawer-close,.drawer-backdrop{display:none}.mobile-menu-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--paper2);padding:11px}.mobile-menu-toggle span{display:block;width:20px;height:2px;border-radius:99px;background:currentColor;margin:3px auto}.drawer-close{position:absolute;right:12px;top:12px;width:40px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.06);color:var(--sideText);font-size:1.35rem}
.app-footer{margin:28px 0 8px;padding:14px 8px 4px;text-align:center;color:var(--muted);font-size:.72rem}

.breakdown-list{display:grid;gap:10px;margin-top:12px}.breakdown-piece{border:1px solid var(--line);border-radius:12px;background:var(--paper2);padding:14px}.breakdown-piece .piece-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:7px}.breakdown-piece h4{margin:0}.breakdown-piece .piece-copy{font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--ink);margin:6px 0 10px}.breakdown-piece .piece-note{font-size:.82rem;line-height:1.48;color:var(--muted);margin:5px 0}.breakdown-piece.color-piece{border-color:color-mix(in srgb,var(--accent2) 48%,var(--line))}.breakdown-summary{padding:13px 14px;border-radius:11px;background:var(--soft);line-height:1.5;color:var(--muted)}.first-reading-step{padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--paper2);margin-top:10px}.first-reading-step .step-label{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent2);font-weight:800;margin-bottom:6px}.reaction-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.reaction-row button{border:1px solid var(--line);background:var(--paper2);border-radius:999px;padding:8px 10px;font-size:.8rem}.ladder{display:grid;gap:10px}.ladder-rung{border:1px solid var(--line);border-radius:12px;background:var(--paper2);padding:14px}.ladder-rung b{display:block;font-size:.78rem;margin-bottom:6px}.ladder-rung.useful{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}.thread-scene{border:1px solid var(--line);border-radius:12px;background:var(--paper2);padding:14px}.thread-scene + .thread-scene{margin-top:10px}.stop-beat{padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--paper2);margin-top:9px}.stop-beat.current{border-color:var(--accent)}
@media(max-width:950px){body.drawer-open{overflow:hidden}.shell{display:block}.side{display:block;position:fixed;inset:0 auto 0 0;z-index:80;width:min(330px,86vw);height:100dvh;padding:22px 18px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:18px 0 45px rgba(0,0,0,.28)}body.drawer-open .side{transform:translateX(0)}.side .brand{padding-right:58px}.side .brand .eyebrow{padding-right:8px;line-height:1.45;letter-spacing:.14em}.drawer-close{display:block}.drawer-backdrop{position:fixed;inset:0;z-index:70;border:0;background:rgba(15,13,11,.58);padding:0}body.drawer-open .drawer-backdrop{display:block}.mobile-menu-toggle{display:grid;grid-column:1;flex:0 0 auto}.main{padding:0 18px 50px}.topbar{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:44px minmax(0,1fr) auto 40px;align-items:center;gap:10px;margin:0 -18px 21px;padding:12px 18px;background:color-mix(in srgb,var(--paper) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.topbar>div:nth-child(2){min-width:0;overflow:hidden}.topbar h2{font-size:1.35rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.topbar p{font-size:.77rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-actions{display:contents}.topbar-actions .privacy-pill{display:none}.topbar-actions #homeBtn{grid-column:3;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 10px;white-space:nowrap;min-width:max-content}.topbar-actions #darkToggle{grid-column:4;width:40px;height:40px;padding:0;display:grid;place-items:center}.library-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:1fr 1fr}.help-dot{display:inline-grid;cursor:pointer;touch-action:manipulation}}
@media(max-width:620px){.topbar{grid-template-columns:42px minmax(0,1fr) auto 38px}.topbar-actions #homeBtn{height:38px;padding:0 7px;font-size:.75rem}.topbar-actions #darkToggle{width:38px;height:38px}.help-dot{width:18px;height:18px;min-width:18px;font-size:11px}.beginner-how{display:block}.beginner-how strong{white-space:normal;display:block;margin-bottom:4px}.main{padding-inline:11px}.topbar{margin-inline:-11px;padding:10px 11px;gap:7px}.topbar p{display:none}.grid.two,.grid.three,.form-grid,.choice-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.library-tools{grid-template-columns:1fr}.quick-start-grid,.guide-path{grid-template-columns:1fr}.color-stage{border-radius:22px;padding:25px 20px 46px;box-shadow:0 12px 28px rgba(0,0,0,.13),inset 0 0 0 5px #fffaf1,inset 0 0 0 7px #3f3b36}.color-row{gap:6px}.color-breathing-space{height:0}.color-choice{padding-top:60px}.zone-key.top{height:60px}.zone-key.bottom{bottom:-44px;height:44px}.color-row{margin-bottom:53px}.swatch{border-radius:12px}.color-stage .corner{width:45px;height:45px}.corner .chips span{width:6px;height:6px}.color-title{font-size:1.75rem;margin-inline:17px}}
@media print{.side,.topbar,.actions,.btn,.privacy-pill,.mobile-menu-toggle{display:none!important}.shell{display:block}.main{padding:0}.view{display:none!important}.view.active{display:block!important}.card{box-shadow:none}}



body.public-mode .color-choice .zone-key.top,
body.public-mode .color-choice .zone-key.bottom{
  position:fixed !important;
  z-index:60 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  opacity:1;
  -webkit-tap-highlight-color:transparent;
  appearance:none;
}
body.public-mode .color-choice .zone-key.top{bottom:auto !important}
body.public-mode .color-choice .zone-key.bottom{bottom:auto !important}
.color-choice .zone-key::before,
.color-choice .zone-key::after{content:none !important}
.color-choice .zone-key:hover,
.color-choice .zone-key:active,
.color-choice .zone-key:focus{
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body:not(.public-mode) .color-choice .zone-key,
body.color-reading-open .color-choice .zone-key{
  opacity:0 !important;
  pointer-events:none !important;
}


#colorReading,.breakdown-piece .piece-copy{white-space:pre-line}
.unlock-test{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#privateAccessDialog{width:min(390px,calc(100% - 24px))}
#privateAccessDialog .modal{padding:23px}
#privateAccessDialog .private-access-title{font:500 1.4rem Georgia,serif;margin:0 0 15px}
#privateAccessDialog .access-error{min-height:1.3em;font-size:.82rem;color:var(--danger);margin:8px 0 0}
#privateAccessDialog .access-actions{margin-top:16px}
#privateAccessDialog input{font-size:16px}

body:not(.public-mode) .view[data-view-panel="home"]{display:none!important}
body:not(.public-mode) .side{display:block}
body:not(.public-mode) .topbar{display:flex}
body:not(.public-mode) .main{max-width:none}
body.public-mode .zone-key{touch-action:manipulation}
@media(max-width:950px){body:not(.public-mode) .topbar{display:grid}}