/* Inkfolio's working surface. Paper and sample ink retain their original colors. */
:root{color-scheme:dark;--blue:#a1b4ff;--text:#eef1f8;--muted:#a5afc1;--border:#30394a;--surface:#1a2130;--raised:#222c3e;--base:#10141e;--action:#526de0}
body{background:var(--base);color:var(--text);line-height:1.5}
header{background:#151b27;border-color:var(--border);padding:0 max(24px,calc((100vw - 1360px)/2));min-height:74px}
.brand{font-size:25px;letter-spacing:-.7px}.logo{background:var(--action);width:36px;height:36px;font-size:32px;border-radius:10px}
.topnav{gap:20px}.topnav .text-button,.topnav a{color:var(--muted);text-decoration:none}.topnav .text-button:hover,.topnav a:hover{color:var(--text)}
main{max-width:1416px;padding:30px 28px 0}.intro{margin-bottom:10px;gap:16px}h1{font-family:'DM Sans',Arial,sans-serif;font-weight:600;font-size:30px;letter-spacing:-.8px;line-height:1.3}
.intro>div>p:last-child{margin:8px 0 0;color:var(--muted);font-size:16px}.beta-label{background:#263253;color:#bdcbff;font-size:13px;padding:6px 12px}
.account-status{font-size:14px;margin:12px 0 24px;color:var(--muted)}
.journey{gap:0;margin-bottom:20px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.journey button{background:transparent;border:1px solid transparent;padding:14px 20px;border-radius:9px;gap:14px;color:var(--muted)}
.journey button:hover{background:#252e41}.journey button[aria-current="step"]{background:#293654;border-color:#536ba4;color:var(--text)}
.journey strong{font-size:16px;font-weight:600}.journey small{font-size:14px;color:var(--muted);margin-top:2px}.step-number{background:#2e394f;color:#b6c5eb;width:30px;height:30px;font-size:14px}
.journey button[aria-current="step"] .step-number,.journey .complete .step-number{background:var(--action);color:white}
.workspace{grid-template-columns:minmax(320px,380px) minmax(0,1fr);background:var(--surface);border-color:var(--border);border-radius:14px;box-shadow:0 14px 48px #0003}
.controls{padding:26px;border-color:var(--border);min-width:0}.section-title{margin-bottom:14px}.section-title h2{font-size:20px}.section-title span{font-size:13px;color:var(--muted)}
textarea,input:not([type=range]):not([type=checkbox]):not([type=file]),select{background:#121a29;border-color:#3a455a;color:var(--text)}
textarea{font-size:16px;min-height:260px;padding:16px;border-radius:10px;line-height:1.7}textarea::placeholder,input::placeholder{color:#8e9bb2}
textarea:focus,select:focus{border-color:#8ca3ff}.primary,.secondary{min-height:46px;border-radius:9px;font-size:15px;font-weight:600;padding:12px 16px}
.primary{background:var(--action);color:#fff}.primary:hover{background:#647ded}.secondary{background:var(--raised);border-color:#46546d;color:#d5dfff}.secondary:hover{background:#2c3952;border-color:#687eab}
.text-button{color:var(--blue);font-size:14px;min-height:36px}.text-button:hover{color:#d4deff}
.profile-info{padding:18px 0;margin:0 0 18px;gap:10px;border-color:var(--border)}.profile-info strong{font-size:14px}.profile-info p{font-size:13px;margin:4px 0 0;color:var(--muted)}.profile-info .text-button{font-size:13px}
.small,.muted{color:var(--muted);font-size:14px;line-height:1.65}#writePanel>.small{margin:10px 0 22px;font-size:13px}
.optional-tools{border-color:var(--border);padding:18px 0}.optional-tools summary{font-size:14px;color:var(--text);gap:8px}.optional-tools summary span{font-size:12px;color:var(--muted)}
.optional-tools summary::after{font-size:19px;color:var(--blue);min-width:12px}.optional-tools[open]>summary{margin-bottom:22px}
.setting-group{border:0;border-top:1px solid var(--border);padding:20px 0 0;margin:22px 0 0;min-width:0}.setting-group:first-of-type{border-top:0;padding-top:0;margin-top:0}
.setting-group legend{padding:0 8px 0 0;font-size:14px;font-weight:600;color:#dce5fa}.settings-grid label,.slider-label,.join-option,.style-label,.ink-row{font-size:14px;color:#d0d8e8}
select{padding:10px 12px;border-radius:8px;font-size:14px;min-height:44px}.slider-label output{font-size:13px;color:var(--muted)}input[type=range]{accent-color:#8ba2ff;margin:0}
.join-option{align-items:flex-start;line-height:1.5}.join-option input{accent-color:var(--action);margin-top:4px}.ink-row{margin:20px 0}.swatches button{width:28px;height:28px;border:3px solid #edf1fa;outline-offset:3px}.swatches button.selected{outline-color:#b3c5ff}
.assistant-box{margin-top:0}.assistant-box textarea{min-height:100px}.assistant-box h2{font-size:16px}
.preview{background:#141b28;background-image:none;padding:26px 30px;border:0}.preview-toolbar{color:#bcc7dd;font-size:14px;font-weight:500;letter-spacing:0}.preview-toolbar>span{color:var(--muted);font-weight:400}
.print-actions{margin:18px 0 24px}.print-actions .primary{background:#314a9d}.print-actions .primary:hover{background:#3e59b3}.print-actions .small{font-size:13px;text-align:left;margin-top:10px;max-width:550px}
.demo-badge{background:#273249;border:1px solid #3f4e69;color:#cad6ed;text-align:left;font-size:14px;padding:12px 14px;border-radius:9px}
#pages{max-width:710px;gap:28px;margin:20px auto}.paper{background:white;box-shadow:0 8px 28px #0005;border-radius:2px;color-scheme:light}.preview-foot{color:var(--muted);font-size:12px;margin-top:24px}.preview-foot span:last-child{font-family:inherit;font-style:normal;font-size:12px}
.getting-started{background:#202d48;border-color:#455b86;border-radius:12px;padding:18px 22px}.getting-started p{color:#b3bfd7;font-size:14px}.getting-started strong{font-size:16px}
.setup-heading{max-width:none;align-items:center;gap:24px}.setup-heading h2{font-size:23px}.setup-heading p{font-size:16px;margin-bottom:0;max-width:700px}
.practice-progress{margin:20px 0 0;gap:8px}.practice-progress span{font-size:13px;padding:8px 12px;background:#151d2c;border-color:var(--border);color:var(--muted)}.practice-progress span.complete{background:#25375b;border-color:#4d689b;color:#cfdbff}
.steps{padding:0;list-style:none;counter-reset:capture;gap:18px;max-width:none;margin:24px 0}.steps li{counter-increment:capture;background:#202a3b;border:1px solid var(--border);border-radius:12px;padding:22px;min-width:0}
.steps li::before{content:counter(capture);display:grid;place-items:center;width:28px;height:28px;margin-bottom:14px;background:#334463;color:#cfdaff;border-radius:8px;font-size:14px;font-weight:600}
.steps strong{font-size:16px}.steps p{color:#b5bfd1;font-size:14px;line-height:1.65;margin:10px 0 18px}.steps #uploadStatus{font-size:12px;margin:12px 0 0;color:var(--muted)}
.steps .primary,.steps .upload{width:100%;font-size:14px}.upload{background:#253452;color:#d4e1ff;border:1px dashed #7488b3;padding:14px 12px;border-radius:9px;min-height:46px}.upload:hover{background:#304365}
#viewPack{font-size:13px;margin:8px auto 0;display:block}#sampleSignIn p{color:#bdcdff;font-size:14px}#sampleSignIn a{font-size:14px}
#savedPhotoTools,#glyphReview{max-width:none;margin:24px 0}#sampleEditor{margin:28px auto}#alignHelp{background:#293b61;color:#e2eaff}
#pendingReview{background:#202c42;border-color:#526993;border-radius:12px}#sampleEditor canvas{background:white;border-color:#44536e}
.review-card{background:#242f44;border-color:#45536b;border-radius:10px;color:var(--text)}.review-card img,.glyph img{background:#fff;border-radius:5px;padding:3px}.review-card small{color:#f4bc95}.review-card p{font-size:14px}.review-card .secondary{min-height:40px;padding:8px 10px;font-size:13px}
.glyph{background:#222e42;color:#dbe4f6;border-color:#445169;border-radius:8px}.glyph.empty{background:#40332c;color:#f0c4a5}.glyph:hover{border-color:#91a8e4}.glyph:focus{outline-color:#b1c4ff}
dialog{background:#1b2435;border-color:#45536d;color:var(--text);padding:28px;border-radius:16px;box-shadow:0 24px 90px #0008}dialog::backdrop{background:#070c16cc;backdrop-filter:blur(3px)}
dialog h2{font-size:22px}dialog h3{font-size:17px}dialog p{font-size:15px;line-height:1.65;color:#c1ccdf}.dialog-close{background:#34425b;color:#e2eaff;border:1px solid #51607b}
dialog details{border-color:var(--border)}dialog input,dialog textarea{background:#121a29;border-color:#45536c;color:var(--text)}dialog label{font-size:14px}
.plan-card{background:#263552;border-color:#465c85}.plan-card h3{color:var(--text)}.ticket,.sample-row{background:#222e43;border-color:#41506b}.chat-message{background:#293956;color:#dde6f6}
#adminStats p{background:#2d3d5b;color:#e0e8f8}.notice{background:#3c3021;color:#ffdb9f;border:1px solid #776042;padding:14px;font-size:14px}
#toast{background:#e2e9fa;color:#18253e;box-shadow:0 8px 36px #0005;font-size:14px}
footer{color:#8c99b1;font-size:12px;padding:24px 0;gap:16px}footer span:first-child{color:#afbed7}footer a{color:#9eb1dd}
summary:focus-visible{outline:3px solid #9baefb;outline-offset:5px;border-radius:3px}button:disabled{opacity:.5}#practicePages img{background:white;color-scheme:light}
.workspace:has(#sampleTab[aria-selected="true"]) .controls{padding:30px}.workspace:has(#sampleTab[aria-selected="true"]) .assistant-box{max-width:none}
@media(min-width:1250px){.workspace{grid-template-columns:390px minmax(0,1fr)}}
@media(max-width:1000px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.steps li{padding:18px}.steps .upload{max-width:none}.journey button{padding:12px 14px}.journey small{font-size:13px}}
@media(max-width:850px){main{padding:24px 20px 0}.workspace{grid-template-columns:320px minmax(0,1fr)}.controls{padding:22px}.preview{padding:24px 20px}.steps{grid-template-columns:1fr}.steps li{padding:20px}.setup-heading{align-items:flex-start}.journey small{display:none}}
@media(max-width:680px){header{padding:14px 16px;gap:12px;align-items:center;flex-wrap:wrap}.brand{font-size:24px}.topnav{gap:12px;margin-left:auto}.topnav .text-button,.topnav a{font-size:13px}main{padding:24px 14px 0}h1{font-size:26px}.intro>div>p:last-child{font-size:15px}.intro{margin-bottom:12px;align-items:flex-start}.account-status{margin:12px 0 20px}.journey{padding:5px;gap:3px}.journey button{flex-direction:column;align-items:flex-start;gap:7px;padding:10px 12px}.journey strong{font-size:14px}.step-number{width:24px;height:24px;font-size:12px}.workspace{display:flex;flex-direction:column}.controls{padding:22px 18px;border-right:0}.preview{padding:22px 18px;border-top:1px solid var(--border)}textarea{min-height:220px}.setup-heading{flex-direction:column;gap:8px}.setup-heading h2{font-size:21px}.setup-heading p{font-size:15px}.workspace:has(#sampleTab[aria-selected="true"]) .controls{padding:24px 18px}.practice-progress{gap:6px;margin-top:18px}.practice-progress span{font-size:12px;padding:7px 9px}.steps{gap:12px;margin:20px 0}.optional-tools summary span{font-size:12px}.getting-started{padding:18px}.preview-foot span:last-child{display:none}dialog{padding:22px}.setting-group{margin-top:24px}.profile-info .text-button{font-size:13px}.review-card{max-width:100%}}
@media(max-width:380px){.journey button{gap:6px;padding:10px 5px}.journey strong{font-size:13px}.step-number{width:21px;height:21px}.optional-tools summary span{display:none}.topnav{width:100%;justify-content:flex-end}.beta-label{padding:5px 8px}.profile-info{gap:8px}.pen-icon{display:none}}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*{scroll-behavior:auto!important}}
@media print{:root{color-scheme:light}body{background:white;color:black}.paper{box-shadow:none}}

/* Missing sample review stays outside the printable canvas. */
#missing p{margin:8px 0 12px}.missing-characters{display:flex;gap:8px;flex-wrap:wrap;max-height:160px;overflow:auto;padding:4px}
.missing-character{min-width:48px;min-height:44px;padding:8px 14px;border-radius:8px;background:#51412c;border:1px solid #98794b;color:#ffe4b9;font-size:17px;font-weight:600}
.missing-character:hover,.missing-character[aria-pressed=true]{background:#715630;border-color:#ffd38e}.page-sheet{position:relative;min-width:0}
.missing-highlight{position:absolute;border:2px solid #b76400;outline:3px solid #ffd27a;outline-offset:2px;background:#ffcc4826;box-shadow:0 0 0 6px #fff9;border-radius:3px;pointer-events:none;scroll-margin-top:125px}
.missing-highlight:focus{outline:3px solid #ffd27a}.workspace:has(#missingReview:not([hidden])){overflow:clip}
.missing-review{position:sticky;top:12px;z-index:3;display:flex;align-items:center;gap:12px;padding:12px;background:#233149;border:1px solid #667da9;border-radius:10px;box-shadow:0 6px 22px #0006;margin:16px 0}
#missingSample{width:48px;height:40px;background:white;border-radius:5px;flex:none}.missing-review-copy{flex:1;min-width:0}.missing-review-copy strong{display:block;font-size:14px;overflow-wrap:anywhere}.missing-review-copy span{display:block;font-size:13px;color:#bac8df}.missing-navigation{display:flex;gap:8px;margin-top:6px}.missing-navigation:has(button[hidden]){display:none}.missing-navigation .secondary{min-height:36px;font-size:12px;padding:6px 10px}.missing-review>.text-button{align-self:flex-start}
@media(max-width:680px){.missing-review{gap:8px;padding:10px;top:8px}.missing-review-copy strong{font-size:13px}.missing-navigation .secondary{min-height:40px;padding:6px 9px}}
@media print{.missing-highlight,.missing-review{display:none!important}}

.paper-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;color:#d0d8e8;font-size:14px}
.paper-choice select{margin:0;width:auto;min-width:0;max-width:210px;flex:1}.paper-choice span{flex:none}.settings-grid>label:only-child{grid-column:1/-1}

/* Notebooks remain a secondary library, with a compact save area in the editor. */
.note-editor{margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--border)}.note-editor label{font-size:14px;display:block;margin-bottom:6px}.note-editor label span{font-size:12px;display:block}.note-editor input{width:100%;padding:10px 12px;border:1px solid #3a455a;border-radius:8px;font-size:16px;min-height:44px}.note-destination,.note-save-row{display:flex;align-items:center;gap:12px;margin-top:10px}.note-destination select{flex:1;min-width:0;margin:0}.note-destination button{flex:none}.note-save-row .secondary{flex:none}.note-save-row span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.notebooks-dialog{width:min(960px,calc(100vw - 32px));max-height:90vh}.notebooks-dialog h2{padding-right:75px}.notebook-create{display:flex;gap:12px;margin:20px 0}.notebooks-dialog input:not([type=checkbox]){padding:10px 12px;border:1px solid #45536c;border-radius:8px;min-height:44px;font-size:16px;min-width:0}.notebook-create input{flex:1}.library-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:16px}.library-toolbar label{display:flex;flex-direction:column;gap:8px;min-width:0}.library-toolbar select{margin:0}.library-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0}.library-actions .join-option{margin:0 0 0 auto}.notebook-notes{display:grid;gap:12px}.notebook-note{padding:18px;border:1px solid #40516d;border-radius:12px;background:#202d42}.notebook-note-top{display:flex;gap:12px;align-items:center}.note-selection input{width:18px;height:18px;accent-color:var(--action)}.note-title-button{padding:4px 0;background:none;border:0;color:var(--text);font-size:18px;font-weight:600;text-align:left;overflow-wrap:anywhere;flex:1;min-width:0}.note-title-button:hover{text-decoration:underline}.note-state{font-size:12px;background:#31436c;padding:4px 9px;border-radius:6px;flex:none}.note-excerpt{font-size:14px!important;overflow-wrap:anywhere;margin:10px 0}.note-actions{display:flex;gap:8px;flex-wrap:wrap}.note-actions .secondary{padding:7px 12px;font-size:14px;min-height:40px}.saved-note-pages{display:grid;gap:20px;max-width:660px;margin:24px auto}.saved-note-pages figure{margin:0}.saved-note-pages img{width:100%;height:auto;display:block;background:white;box-shadow:0 6px 24px #0005}.saved-note-pages figcaption{font-size:13px;color:var(--muted);margin-top:6px}.notebooks-dialog .optional-tools input{margin:0 8px 10px 0;max-width:100%}
@media(max-width:680px){.topnav{flex-wrap:wrap}.notebooks-dialog{padding:20px;width:calc(100vw - 24px)}.notebook-create,.library-toolbar{display:flex;flex-direction:column;gap:10px}.library-actions .join-option{margin:0;width:100%}.notebook-note{padding:14px}.note-title-button{font-size:16px}.note-save-row{align-items:flex-start}.note-state{font-size:12px}.notebook-note-top{gap:8px}}
.repair-alternatives{display:flex;gap:8px;flex-wrap:wrap}.repair-alternatives button{font-size:14px;min-height:44px}#repairLetters{width:100%;max-width:450px;padding:10px 12px;border:1px solid #45536c;border-radius:8px;font-size:16px}#repairDialog{width:min(800px,calc(100vw - 32px))}.inspect-letters canvas{cursor:crosshair}#inspectLetters[aria-pressed=true]{background:#2b3d64;border-radius:8px;padding:4px 12px}#inspectLettersHelp{margin:6px 0 16px}
.paper-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.paper-fit-grid label{font-size:14px;min-width:0}.paper-fit-grid input{width:100%;min-width:0;min-height:44px;border:1px solid #45536c;border-radius:8px;padding:9px 10px;margin-top:6px;font-size:16px}#paperFitError{margin-bottom:16px}#noteSaveStatus{max-width:50%;text-align:right;overflow-wrap:anywhere}
@media(max-width:380px){.paper-fit-grid{grid-template-columns:1fr}}

/* One task at a time, with the same three steps on every screen. */
body[data-stage] .workspace{display:block;max-width:780px;margin:0 auto}
body[data-stage="1"] .workspace{max-width:1100px}
body[data-stage="3"] .workspace{max-width:940px}
body[data-stage] .controls{border-right:0;padding:30px}
body[data-stage="3"] .preview{padding:28px}
.intro,.journey,.account-status,.getting-started{max-width:1100px;margin-left:auto;margin-right:auto}
.getting-started{margin-bottom:20px}.intro h1{font-size:30px}.brandnote{display:none}
.topnav .text-button,.topnav a{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
#writePanel textarea{min-height:280px;line-height:1.65}
#writePanel .profile-info{margin:16px 0 20px;padding:16px 0}
#writePanel .optional-tools:last-child{border-bottom:0}
#writePanel .optional-tools summary{font-size:16px}
.note-editor{margin-top:22px}.note-editor summary>span{font-size:13px!important}
.paper-fit-tools>summary{font-size:14px!important}.paper-fit-tools[open]>summary{margin-bottom:18px}
.paper-fit-tools>summary span{font-weight:400;color:var(--muted);font-size:13px}
.preview-navigation{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:20px 0}
.preview-navigation .text-button{min-height:44px}.preview-toolbar{font-size:16px}
.preview .print-actions{max-width:710px;margin:20px auto}.preview .demo-badge{max-width:710px;margin:20px auto}
.preview #inspectLetters,.preview #inspectLettersHelp{margin-left:max(0px,calc((100% - 710px)/2))}
.guide-dialog{width:min(850px,calc(100vw - 32px));max-width:850px}
.guide-dialog h2{padding-right:70px}.guide-dialog p{font-size:16px;line-height:1.65}
.guide-steps{padding:0;list-style:none;counter-reset:guide;display:grid;gap:14px;margin:24px 0}
.guide-steps>li{counter-increment:guide;border:1px solid var(--border);background:#202d42;border-radius:12px;padding:20px}
.guide-steps>li>strong{display:block;font-size:17px}.guide-steps>li>strong:before{content:counter(guide) '. ';color:#b7c7ff}
.guide-steps p{margin:8px 0 16px}.guide-dialog .optional-tools summary{font-size:16px;line-height:1.5}
.page-sheet{content-visibility:auto;contain-intrinsic-size:auto 920px}
@media(max-width:680px){body[data-stage] .controls,body[data-stage="3"] .preview{padding:22px 18px}.intro h1{font-size:26px}#writePanel textarea{min-height:240px}.preview-navigation{gap:12px}.guide-dialog{padding:20px;width:calc(100vw - 24px)}.guide-steps>li{padding:16px}.topnav{gap:12px}.intro,.journey,.account-status,.getting-started{max-width:100%}}
@media print{.page-sheet{content-visibility:visible}}
.page-choice{margin:18px 0 22px}.page-choice-title{display:block;color:var(--text);font-size:16px;font-weight:600;margin-bottom:10px}
.page-style-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.page-style-buttons button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:72px;min-width:0;padding:14px 16px;text-align:left;background:#202a3c;color:var(--text);border:2px solid #43516b;border-radius:10px;font-size:16px;line-height:1.4}
.page-style-buttons button span{font-size:14px;color:#bdc9de}.page-style-buttons button:hover{border-color:#8197cc}
.page-style-buttons button[aria-pressed=true]{background:#30416b;border-color:#a1b4ff}.page-style-buttons button[aria-pressed=true] span{color:#e0e7ff}
.preview .page-choice{max-width:710px;margin:22px auto}
/* Owner checks load only while their tool window is open. */
.qa-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qa-actions .plan-card{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.qa-actions button{margin-top:auto}
.qa-run h3{overflow-wrap:anywhere}.qa-run details{margin:12px 0}
.qa-result{padding:12px 0;border-bottom:1px solid var(--border,#39435b)}
.qa-run pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font-size:12px}
.qa-run img{width:100%;height:auto;border-radius:8px}
@media(max-width:600px){.qa-actions{grid-template-columns:1fr}}
.free-pass-row h4{margin:0;font-size:18px}.free-pass-row p{overflow-wrap:anywhere}#freePassAdminDialog .plan-card h3{font-size:22px}#freePassLink{font-size:13px}#freePassCreated{margin-top:18px}