/* Public web Studio additions on top of the shared web/style.css and /theme.css. */
#boot-overlay{position:fixed;inset:0;background:rgba(248,246,241,.94);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:16px}
.boot-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;max-width:480px;width:100%;box-shadow:var(--shadow-2)}
.boot-card h2{font-size:24px;margin:.5rem 0 .6rem}
.boot-card p{color:var(--ink-2);font-size:14px;line-height:1.7;overflow-wrap:anywhere}
#boot-fill{height:100%;width:6%;background:var(--accent);border-radius:inherit;transition:width .4s}
.stali-box{background:linear-gradient(180deg,var(--accent-soft),var(--surface));border:1px solid var(--accent-line);border-radius:var(--r-md);padding:1rem 1.1rem;margin:1rem 0}
.stali-box p{margin:.5rem 0}
#ai-connect-dialog{max-width:680px;width:calc(100vw - 32px)}
#ai-connect-dialog .field input,#ai-connect-dialog .field select{width:100%;min-height:40px;padding:.5rem .7rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface)}
.mobile-note{display:none}
@media (max-width:760px){.mobile-note{display:block;margin:0 0 1rem}}
#ai-connect-dialog .field input[readonly]{background:var(--sunken);color:var(--muted)}
#ai-connect-dialog .two-fields{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:560px){#ai-connect-dialog .two-fields{grid-template-columns:1fr}}

/* Consent bar (same as site.css) */
.consent-bar{position:fixed;left:16px;bottom:16px;z-index:40;max-width:min(440px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:.9rem 1rem;font-size:13px;line-height:1.55}
.consent-bar p{margin:0 0 .65rem;color:var(--ink-2)}
.consent-actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}

/* Feedback, bug report and quality contribution (public-feedback.js) */
.fb-dialog{max-width:640px;width:calc(100vw - 32px)}
.fb-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12.5px/1.6 ui-monospace,Consolas,'Cascadia Mono',monospace;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:.75rem .9rem;max-height:260px;overflow:auto;margin:.5rem 0}
.fb-dialog .check-row{display:flex;gap:.55rem;align-items:flex-start;margin:.6rem 0;font-size:14px}
.fb-dialog .check-row input{margin-top:.25rem}
.fb-dialog .quality-rows{display:grid;gap:.25rem;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem .7rem;margin:.5rem 0;font-size:13px}
.fb-dialog .quality-rows label{display:flex;gap:.5rem;align-items:center}
.fb-dialog .consent-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .85rem;margin:.5rem 0}
.fb-dialog .consent-row p{margin:.15rem 0 0;font-size:12.5px;color:var(--muted)}
.fb-dialog .seg{display:flex;gap:.35rem}
.fb-dialog .seg .btn[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.fb-status{font-size:13px;margin:.5rem 0 0}
.fb-status.ok{color:var(--ok)}
.fb-status.bad{color:var(--bad)}
.report-error-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0 0}
.diag-prompt{display:flex;gap:.75rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-md);padding:.65rem .85rem;margin:.75rem 0;font-size:13.5px}
.diag-prompt p{margin:0}
.diag-prompt .actions{display:flex;gap:.4rem}
#feedback-button.has-error::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bad);margin-left:.15rem}
.quality-card{border:1px dashed var(--accent-line);border-radius:var(--r-md);padding:.85rem 1rem;margin:1rem 0;display:flex;justify-content:space-between;gap:.75rem;align-items:center;flex-wrap:wrap}
.quality-card p{margin:.2rem 0 0;font-size:13px;color:var(--muted)}
button.side-link{background:none;border:0;padding:0;font:inherit;font-size:13px;cursor:pointer;text-align:left}
button.side-link:hover{text-decoration:underline}
button.ai-preset{font:inherit;text-align:left;cursor:pointer}

/* Voluntary error reports (public-errors.js) */
.er-parts{display:grid;gap:.1rem;border:1px solid var(--line);border-radius:var(--r-sm);padding:.3rem .8rem;margin:.6rem 0}
.er-parts .check-row span{display:flex;flex-direction:column;gap:.1rem}
.er-parts small{color:var(--muted);font-size:12.5px;line-height:1.4}
.er-dialog .field{display:flex;flex-direction:column;gap:.3rem;margin:.55rem 0;font-size:13.5px;font-weight:500}
.er-dialog .field textarea,.er-dialog .field input{font:inherit;font-weight:400;padding:.45rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.er-nudge{position:fixed;right:1rem;bottom:1rem;z-index:60;max-width:380px;background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r-md);box-shadow:0 10px 30px rgba(0,0,0,.14);padding:.85rem 1rem;animation:er-in .25s ease-out}
.er-nudge p{margin:0 0 .6rem;font-size:13.5px;line-height:1.5}
.er-nudge-actions{display:flex;gap:.5rem;justify-content:flex-end}
@keyframes er-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.er-list{border:1px solid var(--line);border-radius:var(--r-md);padding:.6rem .8rem;margin:.6rem 0;display:grid;gap:.35rem}
.er-list .list-title{margin:0 0 .2rem}
.er-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;border-top:1px solid var(--line);padding-top:.4rem}
.er-row:first-of-type{border-top:0;padding-top:0}
.er-row small{display:block;color:var(--muted);font-size:12px}
.er-row-actions{display:flex;gap:.4rem;align-items:center;flex-shrink:0}
.er-list [data-er-clear]{justify-self:start;font-size:12.5px}
@media (max-width:600px){.er-nudge{left:.75rem;right:.75rem;max-width:none}.er-row{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.er-nudge{animation:none}}

/* Achievements (public-wins.js) */
.win-dialog{border:0;border-radius:var(--r-lg);padding:0;max-width:760px;width:calc(100vw - 32px);background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.win-dialog::backdrop{background:rgba(20,22,28,.55)}
.win-inner{position:relative;padding:1.6rem 1.7rem 1.3rem}
.win-inner h2{margin:.2rem 0 .4rem;font-size:clamp(20px,3vw,28px)}
.win-sample{font-size:clamp(34px,6vw,58px);line-height:1.15;margin:.3rem 0 .8rem;overflow-wrap:anywhere}
.win-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;max-height:220px;overflow:auto;padding:.5rem;background:var(--sunken);border-radius:var(--r-md)}
.win-grid span{display:flex;align-items:center;justify-content:center;height:38px;font-size:24px;background:var(--surface);border-radius:6px;animation:win-pop .35s both cubic-bezier(.2,.8,.3,1.3)}
@keyframes win-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.win-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1rem 0 .4rem}
.win-stats div{border:1px solid var(--line);border-radius:var(--r-md);padding:.6rem .7rem}
.win-stats b{display:block;font-size:26px;font-variant-numeric:tabular-nums}
.win-stats small{color:var(--muted);font-size:12.5px;line-height:1.35}
.win-next{font-size:13.5px;color:var(--ink-2);margin:.4rem 0 .9rem}
.win-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}
.win-card,.win-badge-toast{position:fixed;right:1rem;bottom:1rem;z-index:61;display:flex;gap:.8rem;align-items:center;max-width:400px;background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r-md);box-shadow:0 10px 30px rgba(0,0,0,.16);padding:.8rem 1rem;animation:er-in .25s ease-out;transition:opacity .5s,transform .5s}
.win-card.out,.win-badge-toast.out{opacity:0;transform:translateY(8px)}
.win-card small,.win-badge-toast small{display:block;color:var(--muted);font-size:12px}
.win-card b{font-size:16px;font-variant-numeric:tabular-nums}
.win-card p,.win-badge-toast p{margin:.15rem 0 0;font-size:13px}
.win-card-actions{display:grid;gap:.35rem;flex-shrink:0}
.win-card-actions .btn{width:100%;justify-content:center}
.win-card>div:first-child{flex:1;min-width:0}
/* the guide panel sits bottom-right; keep cards above it */
body:has(.vg-root:not([hidden])) .win-card{bottom:auto;top:1rem}
body:has(.vg-root:not([hidden])) .win-badge-toast{bottom:auto;top:6.6rem}
.win-up{color:var(--ok);font-weight:700}.win-down{color:var(--bad);font-weight:700}.win-same{color:var(--muted);font-size:12.5px}
.win-badge-toast{bottom:5.5rem}
.win-badges{margin:1.4rem 0}
.win-badge-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem}
.win-badge{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;border:1px dashed var(--line-2);border-radius:var(--r-md);padding:.75rem .85rem;color:var(--muted);transition:transform .2s,box-shadow .2s}
.win-badge.got{border-style:solid;border-color:var(--line-2);background:linear-gradient(160deg,var(--surface),var(--sunken));color:inherit}
.win-badge.got:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.win-badge.got:hover .win-medal svg{transform:rotate(-6deg) scale(1.06)}
.win-badge small{color:var(--muted);font-size:12px;line-height:1.4}
@media (max-width:600px){.win-stats{grid-template-columns:repeat(2,1fr)}.win-inner{padding:1.2rem 1rem}.win-card,.win-badge-toast{left:.75rem;right:.75rem;max-width:none}}
@media (prefers-reduced-motion:reduce){.win-grid span,.win-card,.win-badge-toast{animation:none}}

/* Nudges (public-nudges.js) */
.resume-card{display:flex;align-items:center;gap:.9rem;margin:1rem 0;padding:.8rem 1rem;border:1px solid var(--accent-line);border-radius:var(--r-lg);background:var(--accent-soft)}
.resume-card>div:nth-child(2){flex:1;min-width:0}
.resume-card small{color:var(--accent-ink);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.resume-card b{display:block;font-size:16px}
.resume-card p{margin:.1rem 0 0;font-size:13.5px;color:var(--ink-2)}
.resume-actions{display:flex;gap:.6rem;align-items:center}
.download-option{flex-wrap:wrap}
.download-use{flex-basis:100%;color:var(--muted);font-size:12.5px;font-weight:400;text-align:left}
.download-tip{margin:.4rem 0 0}
.full-font-hint{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.full-font-hint p{margin:0;flex:1 1 320px}
@media (max-width:600px){.resume-card{flex-wrap:wrap}.resume-actions{width:100%;justify-content:flex-end}}
.win-medal{display:inline-flex;width:48px;height:52px;flex-shrink:0}
.win-medal svg{width:100%;height:100%;overflow:visible;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.win-medal .m-icon{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.win-medal .m-dot{fill:#fff;stroke:none}
.win-medal .m-card{fill:rgba(0,0,0,.25)}
.win-medal .m-lock circle{fill:var(--surface,#fff);stroke:var(--line-2);stroke-width:1}
.win-medal .m-lock rect{fill:var(--muted)}
.win-medal .m-lock path{fill:none;stroke:var(--muted);stroke-width:1.2}
.win-date{font-size:11.5px;color:var(--muted);margin-top:auto}
.win-progress{display:flex;align-items:center;gap:.45rem;width:100%;font-size:11.5px;color:var(--muted);margin-top:auto}
.win-progress i{flex:1;height:5px;border-radius:9px;background:var(--sunken);overflow:hidden;position:relative}
.win-progress i::after{content:"";position:absolute;inset:0;width:calc(var(--p)*100%);background:var(--accent,#4b57d6);border-radius:inherit}
.win-badge-toast .win-medal svg{animation:m-pop .6s cubic-bezier(.3,1.6,.5,1)}
.win-badge-toast .m-shine{animation:m-shine 1.6s .4s ease-out}
@keyframes m-pop{from{transform:scale(.3) rotate(-25deg);opacity:0}}
@keyframes m-shine{0%{stroke-opacity:0}40%{stroke-opacity:1}100%{stroke-opacity:.45}}
@media (prefers-reduced-motion:reduce){.win-medal svg,.win-badge-toast .m-shine{animation:none;transition:none}}
.boot-card{max-height:calc(100vh - 32px);overflow:auto}
.boot-card.drag{outline:2px dashed var(--accent);outline-offset:4px}
.boot-card .boot-meta{display:flex;flex-wrap:wrap;gap:.2rem;font-size:12.5px;color:var(--muted);margin:.4rem 0 0;font-variant-numeric:tabular-nums}
.boot-card .boot-tip{font-size:13px;background:var(--sunken);border-radius:var(--r-md);padding:.55rem .75rem;margin:.6rem 0 0}
.boot-pick{border:1px dashed var(--line-2);border-radius:var(--r-md);padding:.8rem .9rem;margin-top:.9rem}
.boot-pick p{margin:0 0 .6rem;font-size:13.5px}
.boot-preview{border:1px solid var(--accent-line);background:var(--surface);border-radius:var(--r-md);padding:.8rem .9rem;margin-top:.9rem}
.boot-card .boot-family{margin:0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
.boot-card .boot-sample{margin:.2rem 0 .4rem;font-size:30px;line-height:1.25;color:var(--ink,inherit);overflow-wrap:anywhere}
.boot-sample .borrowed{color:var(--mark,#c2410c);background:var(--mark-soft,#fff1e8);border-radius:3px}
.boot-card .boot-count{margin:0;font-size:13.5px}
.boot-wait{margin:.4rem 0 0}
.boot-err{margin:0;font-size:13.5px;color:var(--danger,#b42318)}
.build-letters{display:flex;flex-wrap:wrap;gap:3px;margin:.6rem 0 .2rem}
.build-letters span{width:24px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;border-radius:5px;background:var(--sunken);color:var(--line-2);transition:background .3s,color .3s,transform .3s}
.build-letters span.on{background:var(--accent-soft);color:var(--accent-ink);transform:translateY(-1px)}
.build-meta{margin:.2rem 0 0;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.build-letters span{transition:none}}
/* Cards sit top-right, under the header, so they never cover the Build button (bottom of the side panel). */
.win-card,.win-badge-toast{bottom:auto;top:4.6rem}
.win-badge-toast{top:auto;bottom:auto;top:10.2rem;pointer-events:none}
@media (max-width:600px){.win-card{top:auto;bottom:1rem}.win-badge-toast{top:auto;bottom:6.5rem}}
/* ---- Văn bản thật (Phòng thử tiếng Việt, on the Thử font page) ---- */
.lab-head p{margin:0}
/* lab controls */
.lab-panel{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem;margin:1rem 0 .8rem;display:flex;flex-direction:column;gap:1rem}
.lab-field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.lab-label{display:flex;justify-content:space-between;align-items:baseline;font:600 12.5px/1.2 var(--font-ui);letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.lab-label label{cursor:pointer}
.lab-label output{font:700 13px/1 var(--font-ui);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:.2rem .5rem;text-transform:none;font-variant-numeric:tabular-nums}
.lab-label output::after{content:' px';font-weight:500;color:var(--muted)}
.lab-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.lab-apps button{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--r-md);padding:.55rem .7rem;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.lab-apps button b{font:600 14px/1.2 var(--font-ui)}
.lab-apps button small{font-size:12px;color:var(--muted)}
.lab-apps button:hover{border-color:var(--accent)}
.lab-apps button.selected{border-color:var(--accent);background:var(--accent-soft,#eef0ff);box-shadow:inset 0 0 0 1px var(--accent)}
.lab-apps button.selected b{color:var(--accent-ink,var(--accent))}
.lab-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem 1.4rem;align-items:end}
.lab-row select{width:100%;min-height:38px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);padding:.4rem .6rem;font:500 14px/1.2 var(--font-ui)}
.lab-row input[type=range]{width:100%;accent-color:var(--accent);margin:.55rem 0}
.lab-panel select.lab-hidden{position:absolute;left:0;top:0;width:1px!important;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none;overflow:hidden}
.lab-field{position:relative}
.lab-note{margin:0;padding-top:.8rem;border-top:1px dashed var(--line-2);font-size:13.5px;color:var(--ink-2,var(--muted));display:flex;gap:.5rem}
.lab-note::before{content:'i';flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font:700 11px/18px var(--font-ui);text-align:center}
.lab-row.lead{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}
.lab-label output.lab-x::after{content:''}
@media (max-width:760px){.lab-apps{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-row,.lab-row.lead{grid-template-columns:1fr}}
.lab-verdict{margin:.4rem 0;padding:.6rem .8rem;border-radius:var(--r-md);background:var(--sunken)}
.lab-verdict.warn{background:var(--warn-soft,#fff6e5)}
.lab-verdict.ok{background:var(--ok-soft,#ecfdf3)}
.lab-stage{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin:.6rem 0 1rem;max-height:70vh}
.lab-stage canvas{display:block}
.lab-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem}
.lab-card{border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem 1rem;background:var(--surface);min-width:0;overflow-x:auto}
.lab-card h3{margin:0 0 .3rem}
.lab-cum{margin:.4rem 0 .6rem}
.lab-rank{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.lab-rank li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center}
.lab-char{width:44px;height:44px;font-size:26px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--sunken);cursor:pointer}
.lab-char:hover{border-color:var(--accent)}
.lab-char[data-off]{opacity:.6}
.lab-rank small{color:var(--muted);font-variant-numeric:tabular-nums}
.lab-typing{width:100%;border-collapse:collapse;margin-top:.4rem;font-size:13px}
.lab-typing th{font-weight:600;text-align:left;color:var(--muted);padding:.3rem .2rem;border-bottom:1px solid var(--line)}
.lab-typing td{padding:.25rem .2rem;border-bottom:1px solid var(--line);font-size:22px}
.lab-typing td.muted{font-size:12px}
.lab-diff{background:var(--warn-soft,#fff6e5)}
.lab-flag{font-size:13px;color:var(--warn,#b45309);font-weight:700}
/* ---- Thử font page ---- */
.ico-type{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 5.5V4h9v1.5M7.5 4v12M5.5 16h4'/%3E%3Cpath d='M12.5 10.5V9.5h5v1M15 9.5V16M13.8 16h2.4'/%3E%3C/svg%3E")}
.try-head h1{margin:.3rem 0 .4rem}
.try-head p{max-width:760px}
.try-layout{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr);gap:1.4rem;align-items:start;margin-top:1.2rem}
.try-list{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.6rem;max-height:calc(100vh - 2rem);min-width:0}
.try-search{width:100%;box-sizing:border-box;min-height:38px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);padding:.45rem .7rem;font:500 14px/1.2 var(--font-ui)}
.try-list-hint{margin:0;font-size:12.5px;color:var(--muted)}
.try-fonts{display:flex;flex-direction:column;gap:.6rem;overflow:auto;padding-right:2px}
.try-font{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:.6rem}
.try-font-head{display:flex;gap:.6rem;align-items:center;margin-bottom:.5rem;min-width:0}
.try-font-head>span:last-child{display:flex;flex-direction:column;min-width:0}
.try-font-head b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.try-font-head small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.try-mono{flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--sunken);display:grid;place-items:center;font-size:21px;line-height:1;color:var(--ink)}
.try-vers{display:flex;flex-direction:column;gap:.25rem}
.try-ver{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:var(--r-sm);padding:.4rem .55rem;font:500 13.5px/1.2 var(--font-ui);cursor:pointer}
.try-ver small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.try-ver:hover{background:var(--sunken)}
.try-ver.selected{background:var(--accent-soft);border-color:var(--accent-line,var(--accent));color:var(--accent-ink)}
.try-ver.multi span::before{content:'';display:inline-block;width:13px;height:13px;border:1.5px solid var(--line-2);border-radius:3px;margin-right:.45rem;vertical-align:-2px;background:var(--surface)}
.try-ver.multi.selected span::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--surface)}
.try-empty{border:1px dashed var(--line-2);border-radius:var(--r-md);padding:1rem;text-align:left}
.try-empty p{margin:.3rem 0 .7rem;color:var(--muted);font-size:13.5px}
.try-main{min-width:0}
.try-hero{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:.85rem 1.1rem;margin-bottom:.9rem}
.try-hero-meta{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.try-hero-meta b{font-size:16px}
.try-hero-meta small{color:var(--muted)}
.try-hero-sample{font-size:clamp(24px,3.2vw,38px);line-height:1.6;padding:.1em 0 .25em;margin:.25rem 0 .2rem;overflow-wrap:anywhere}
.try-hero-stat{margin:0;font-size:13px}
.try-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.try-tab{border:0;background:transparent;color:var(--ink-2);font:600 14px/1.2 var(--font-ui);padding:.6rem .8rem;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.try-tab:hover{color:var(--ink)}
.try-tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
/* mockups */
.mk-groups{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.mk-groups button{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:99px;padding:.32rem .75rem;font:600 13px/1.2 var(--font-ui);cursor:pointer}
.mk-groups button.selected{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.mk-strip{display:flex;gap:.55rem;overflow-x:auto;padding:.1rem .1rem .6rem;scroll-snap-type:x proximity}
.mk-thumb{flex:none;width:132px;display:flex;flex-direction:column;gap:.3rem;border:2px solid transparent;background:transparent;border-radius:var(--r-md);padding:3px;cursor:pointer;scroll-snap-align:start;text-align:left;color:var(--ink)}
.mk-thumb img{width:100%;height:90px;object-fit:cover;border-radius:7px;display:block;background:var(--sunken)}
.mk-thumb span{font:500 12px/1.25 var(--font-ui);padding:0 .15rem}
.mk-thumb:hover img{filter:brightness(.94)}
.mk-thumb.selected{border-color:var(--accent)}
.mk-body,.vd-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:1.2rem;align-items:start;margin-top:.4rem}
.mk-stage,.vd-stage{position:relative;background:var(--sunken);border-radius:var(--r-md);padding:10px;display:flex;justify-content:center;align-items:center;min-height:280px}
.mk-stage canvas,.vd-stage canvas{max-width:100%;max-height:70vh;width:auto;height:auto;border-radius:6px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
.mk-busy{position:absolute;top:14px;left:14px;background:rgba(15,16,20,.72);color:#fff;font:500 12.5px/1 var(--font-ui);padding:.45rem .65rem;border-radius:99px}
.mk-side,.vd-side{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.mk-field{display:flex;flex-direction:column;gap:.35rem;font:600 12.5px/1.2 var(--font-ui);color:var(--muted)}
.mk-field textarea{width:100%;box-sizing:border-box;font:500 14.5px/1.4 var(--font-ui);color:var(--ink);padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);resize:vertical}
.mk-check{display:flex;gap:.45rem;align-items:center;font-size:13.5px}
.mk-side .text-btn{align-self:flex-start}
.mk-side .field-help,.vd-side .field-help{margin:0}
.vd-pair{margin:0;font-size:13.5px;line-height:1.5}
/* compare */
.cmp-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px);gap:1rem;align-items:end;margin-bottom:1rem}
.cmp-controls input[type=range]{width:100%;accent-color:var(--accent)}
.cmp-controls output{font-variant-numeric:tabular-nums;color:var(--ink)}
.cmp-rows{display:flex;flex-direction:column;gap:.8rem}
.cmp-row{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:.8rem 1rem;min-width:0}
.cmp-row header{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.cmp-row header span{color:var(--accent-ink);font-weight:600}
.cmp-row header small{margin-left:auto;color:var(--muted)}
.cmp-sample{margin:.5rem 0 0;line-height:1.35;overflow-wrap:anywhere}
.font-actions [data-try-font]{color:var(--accent-ink)}
.lab-custom textarea{width:100%;box-sizing:border-box;font:500 14.5px/1.4 var(--font-ui);padding:.5rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);color:var(--ink);resize:vertical}
@media (max-width:900px){.try-layout{grid-template-columns:1fr}.try-list{position:static;max-height:none}.try-fonts{flex-direction:row;overflow-x:auto;padding-bottom:.3rem}.try-font{flex:none;width:240px}}
@media (max-width:760px){.mk-body,.vd-body,.cmp-controls{grid-template-columns:1fr}.mk-stage canvas,.vd-stage canvas{max-height:56vh}.mk-thumb{width:112px}.mk-thumb img{height:78px}}
/* ---- Dựng cả họ ---- */
.family-dialog{max-width:640px}
.family-list{list-style:none;margin:.8rem 0;padding:0;display:flex;flex-direction:column;gap:.4rem;max-height:46vh;overflow:auto}
.family-list li{border:1px solid var(--line);border-radius:var(--r-md);padding:.55rem .7rem;transition:border-color .2s,background .2s}
.family-list label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.family-list label span{display:flex;flex-direction:column;min-width:0}
.family-list small{color:var(--muted);overflow-wrap:anywhere}
.family-list li.busy{border-color:var(--accent,#3346d3);background:rgba(51,70,211,.05)}
.family-list li.ok{border-color:var(--ok)}.family-list li.warn{border-color:var(--warn)}.family-list li.bad{border-color:var(--bad)}
.family-dialog select{max-width:100%}
.family-share{margin:.6rem 0;flex-wrap:wrap}
/* ---- Sửa hết dấu chạm ---- */
.markfix-card{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .9rem;margin:0 0 1rem;background:var(--surface)}
.markfix-card p{margin:.15rem 0 0}
.markfix-undo{flex-basis:100%;margin:.1rem 0 0;font-size:.9rem;color:var(--ink-2,var(--muted))}
.markfix-dialog{max-width:940px;width:calc(100vw - 2rem)}
.markfix-inner{display:flex;flex-direction:column;max-height:calc(100vh - 3rem)}
.markfix-inner>.dialog-close{position:absolute;top:1rem;right:1rem;margin:0;float:none}
.markfix-head h2{margin:.25rem 0 .35rem}
.markfix-head p{margin:0 0 .6rem}
.markfix-red{color:#dc2626;font-weight:700}
.markfix-green{color:#15803d;font-weight:700}
.markfix-norms{display:flex;flex-wrap:wrap;gap:.4rem}
.markfix-norms span{background:var(--sunken);border-radius:99px;padding:.3rem .7rem;font-size:12.5px;color:var(--ink-2)}
.markfix-bar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.9rem 0 .4rem;font-size:13.5px;color:var(--muted)}
.markfix-bar .text-btn{margin-left:.6rem}
.markfix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem;overflow:auto;min-height:0;flex:1;padding:2px;margin:0 0 .8rem}
.markfix-item{display:flex;flex-direction:column;gap:.5rem;border:1px solid var(--line);border-radius:var(--r-md);padding:.6rem;cursor:pointer;background:var(--surface);transition:border-color .15s,opacity .15s}
.markfix-item:has(input:checked){border-color:var(--accent-line,var(--accent))}
.markfix-item:has(input:not(:checked)){opacity:.5}
.markfix-top{display:flex;align-items:center;gap:.5rem;min-width:0}
.markfix-top input{width:17px;height:17px;accent-color:var(--accent);flex:none}
.markfix-ch{font-size:20px;line-height:1;min-width:1.2em}
.markfix-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-left:auto;justify-content:flex-end}
.markfix-chip{font-size:11.5px;border-radius:99px;padding:.15rem .5rem;background:#ecfdf3;color:#166534;white-space:nowrap}
.markfix-chip.down{background:#eff6ff;color:#1e40af}
.markfix-pair{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.markfix-side{min-width:0;margin:0;display:flex;flex-direction:column;align-items:center;gap:.2rem;border-radius:8px;padding:.3rem 0 .35rem;background:var(--paper,#f8f6f1)}
.markfix-side canvas{max-width:100%;height:auto;aspect-ratio:1}
.markfix-side figcaption{font:600 11.5px/1 var(--font-ui);text-transform:uppercase;letter-spacing:.05em}
.markfix-side.before figcaption{color:#b91c1c}
.markfix-side.after figcaption{color:#15803d}
.markfix-actions{margin-top:auto}
@media (max-width:560px){.markfix-grid{grid-template-columns:1fr}.markfix-dialog{padding:1rem}.markfix-dialog .win-inner{padding:1rem .8rem}.lab-typing td{font-size:18px}}
.lab-fix{margin:.6rem 0 0}
/* Chữ nghệ thuật (public-artype.js): built from the Studio's own pieces (.settings, .field, .segmented, .btn) */
.art-cats{margin:0 0 .5rem}
.art-tpl[hidden]{display:none}
.art-layer-add{display:flex;flex-wrap:wrap;gap:.35rem;margin:.1rem 0 .2rem}
.art-layer-add .btn{flex:1 1 auto}
.art-tpls{display:flex;gap:.6rem;overflow-x:auto;padding:.15rem .1rem .7rem;scroll-snap-type:x proximity;scrollbar-width:thin}
.art-tpl{flex:none;width:150px;display:flex;flex-direction:column;gap:.35rem;border:0;background:transparent;padding:0;cursor:pointer;scroll-snap-align:start;text-align:left;color:var(--ink-2);font:500 12.5px/1.3 var(--font-ui)}
.art-tpl canvas{width:150px;height:107px;border-radius:var(--r-md);display:block;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,transform .15s}
.art-tpl:hover canvas{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-2)}
.art-tpl.selected{color:var(--accent-ink);font-weight:600}
.art-tpl.selected canvas{box-shadow:0 0 0 2px var(--accent)}
.art-tpl:focus-visible canvas{box-shadow:var(--focus)}
.art-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:1.2rem;align-items:start;margin-top:.3rem}
.art-main{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.art-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between}
.art-bar-group{display:flex;gap:.35rem}
.art-bar .btn.small{min-width:38px}
.art-stage{position:relative;border-radius:var(--r-lg);padding:clamp(10px,2.4vw,28px);display:flex;justify-content:center;align-items:center;min-height:320px;background-color:var(--sunken);background-image:linear-gradient(45deg,rgba(21,23,28,.045) 25%,transparent 25%,transparent 75%,rgba(21,23,28,.045) 75%),linear-gradient(45deg,rgba(21,23,28,.045) 25%,transparent 25%,transparent 75%,rgba(21,23,28,.045) 75%);background-size:18px 18px;background-position:0 0,9px 9px;border:1px solid var(--line)}
.art-stage canvas{max-width:100%;max-height:68vh;width:auto;height:auto;border-radius:4px;box-shadow:0 18px 50px rgba(21,23,28,.18),0 2px 6px rgba(21,23,28,.08);touch-action:none;cursor:grab;outline:none}
.art-stage canvas:focus-visible{box-shadow:var(--focus),0 18px 50px rgba(21,23,28,.18)}
.art-note{margin:0;font-size:13px;color:var(--ink-2);background:var(--accent-soft);border-radius:var(--r-md);padding:.55rem .75rem}
.art-checks{display:flex;flex-direction:column;gap:.4rem}
.art-checks-title{margin:0;font:600 12px/1.3 var(--font-ui);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.art-issue{margin:0;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .55rem .55rem .8rem;border-radius:var(--r-md);font-size:13.5px;line-height:1.45;border:1px solid transparent}
.art-issue.bad{background:var(--bad-soft);border-color:rgba(180,35,24,.15)}
.art-issue.warn{background:var(--warn-soft);border-color:rgba(154,91,0,.15)}
.art-issue.ok{background:var(--ok-soft);border-color:rgba(31,122,85,.15)}
.art-issue .btn{flex:none;background:var(--surface)}
.art-export{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.art-export .version-select{max-width:none;min-height:38px;flex:1 1 180px}
.art-main>.field-help{margin:0}
.art-panel .settings-title .eyebrow{margin:0}
/* features free during the Beta that a later Pro plan covers (see /hoi-dap/#sau-beta) */
.beta-free{display:inline-block;margin-left:.4rem;padding:.08rem .55rem;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 11px/1.6 var(--font-ui);letter-spacing:.03em;vertical-align:.25em;white-space:nowrap}
.art-layer-actions{display:flex;gap:.2rem}
.art-icon{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:8px;font:600 14px/1 var(--font-ui);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.art-icon:hover{border-color:var(--line-2);color:var(--ink)}
.art-icon.danger:hover{color:var(--bad);border-color:var(--bad)}
.art-layers{display:flex;flex-direction:column;gap:2px;max-height:168px;overflow:auto;margin:.2rem 0 .3rem;padding:3px;background:var(--sunken);border-radius:var(--r-md)}
.art-layer{display:flex;align-items:center;gap:.5rem;border:0;background:transparent;border-radius:7px;padding:.38rem .5rem;font:500 13px/1.25 var(--font-ui);color:var(--ink-2);cursor:pointer;text-align:left;min-width:0}
.art-layer:hover{background:rgba(255,255,255,.6)}
.art-layer.selected{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.art-layer-ico{width:20px;height:20px;flex:none;border-radius:5px;background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 var(--font-display);color:var(--muted)}
.art-layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-toggle{display:flex;gap:.5rem;align-items:center;font-size:13px;color:var(--ink-2);margin-top:.6rem}
.art-toggle input{accent-color:var(--accent);width:16px;height:16px}
.art-panel .segmented{display:flex;width:100%;margin-top:.35rem}
.art-panel .segmented button{flex:1 1 0;padding:.35rem .4rem;font-size:12.5px}
.art-wrap{flex-wrap:wrap}
.art-panel .art-wrap button{flex:1 1 30%}
.art-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:.4rem}
.art-look{display:flex;flex-direction:column;gap:.25rem;border:0;background:transparent;padding:0;cursor:pointer;font:500 11.5px/1.2 var(--font-ui);color:var(--ink-2);text-align:center}
.art-look canvas{width:100%;height:auto;aspect-ratio:88/56;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);display:block}
.art-look:hover canvas{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-1)}
.art-look.selected{color:var(--accent-ink);font-weight:600}
.art-look.selected canvas{box-shadow:0 0 0 2px var(--accent)}
.art-swatches{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.art-sw{position:relative;width:28px;height:28px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(21,23,28,.16)}
.art-sw.selected{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.art-sw:focus-visible{outline:none;box-shadow:var(--focus)}
.art-sw-custom{background:conic-gradient(from 0deg,#ff5e5e,#ffd24d,#5ee08a,#4dc3ff,#8a6bff,#ff5ec4,#ff5e5e)}
.art-sw-custom::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff;pointer-events:none}
.art-sw-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.art-pals{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:.4rem;margin-top:.4rem}
.art-pal{display:flex;height:30px;border-radius:8px;overflow:hidden;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(21,23,28,.12)}
.art-pal span{flex:1}
.art-pal span:first-child{flex:1.6}
.art-pal.selected{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.art-img-btn{margin-top:.6rem}
.art-panel .advanced{margin-top:.9rem}
@media (max-width:900px){.art-body{grid-template-columns:1fr}.art-panel{position:static;max-height:none}.art-stage canvas{max-height:58vh}.art-tpl{width:124px}.art-tpl canvas{width:124px;height:89px}}

.markfix-blue{color:#2563eb;font-weight:600}
.markfix-chip.warn{background:var(--warn-soft);color:var(--ink)}
.markfix-strength-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.6rem 0 .2rem}
.markfix-strength-row .field-help{margin:0}
.markfix-warn{border:1px solid #f59e0b;background:var(--warn-soft,#fff6e5);border-radius:10px;padding:.75rem .9rem;margin:.6rem 0;font-size:.92rem;line-height:1.5}
.markfix-warn-title{display:block;font-size:1rem;margin-bottom:.25rem}
.markfix-warn p{margin:.3rem 0}.markfix-warn-sub{font-weight:600}
.markfix-warn ul{margin:.2rem 0 .5rem;padding-left:1.2rem}.markfix-warn li{margin:.2rem 0}
.markfix-forecast{background:var(--accent-soft,#eef0ff);border-radius:10px;padding:.65rem .8rem;margin:.6rem 0;font-size:.92rem;line-height:1.5}
.markfix-clash{background:var(--warn-soft);border-radius:10px;padding:.65rem .8rem;margin:.6rem 0;font-size:.92rem;line-height:1.5}
.lab-tall{display:block;margin-top:.35rem;font-weight:400}
@media (max-width:400px){.art-bar-group{flex-wrap:wrap}}

/* Mark design: same surfaces, typography and actions as the Studio. */
.design-panel{margin:0 0 1rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);overflow:hidden}
.design-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;padding:1rem 1.2rem;list-style:none}
.design-heading::-webkit-details-marker{display:none}
.design-heading b{font:600 19px/1.3 var(--font-display)}
.design-heading small{display:block;color:var(--muted);margin-top:.2rem;font-size:12.5px}
.design-chevron{color:var(--muted);font-size:22px;transition:transform .15s}
.design-panel[open] .design-chevron{transform:rotate(180deg)}
.design-body{padding:0 1.2rem 1.1rem;border-top:1px solid var(--line)}
.design-intro{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.8rem 0 1rem}
.design-intro p{margin:0;color:var(--ink-2);font-size:13px}
.design-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.5rem;align-items:start}
.design-source{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem}
.design-caption{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.design-source img{display:block;width:100%;height:120px;object-fit:contain;background:#fff;border-radius:var(--r-sm);margin:.7rem 0}
.design-source .muted{font-size:11px;margin:.4rem 0;overflow-wrap:anywhere}
.design-measure{font-size:12px;line-height:1.6;color:var(--ink-2);margin:.75rem 0 0;border-top:1px solid var(--line);padding-top:.65rem}
.design-field{display:flex;flex-direction:column;gap:.35rem;font-size:12.5px;font-weight:500;min-width:0}
.design-field textarea,.design-field input,.design-field select,.design-test-text{width:100%;min-width:0;font:400 13px/1.5 var(--font-ui);padding:.55rem .65rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.design-field textarea{resize:vertical;min-height:70px}
.design-settings{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:end;margin:.75rem 0}
.design-budget{color:var(--muted);font-size:12px;line-height:1.6;padding-bottom:.3rem}
.design-options{border-top:1px solid var(--line);padding:.65rem 0;font-size:12.5px}
.design-options>summary{cursor:pointer;color:var(--ink-2)}
.design-marks{display:flex;flex-wrap:wrap;gap:.5rem .8rem;margin:.75rem 0 .25rem}
.design-mark-choice{display:flex;align-items:center;gap:.25rem;white-space:nowrap}
.design-panel input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;flex:none;margin:.2rem 0 0}
.design-check{display:flex;align-items:flex-start;gap:.55rem;font-size:12.5px;line-height:1.6;margin:.6rem 0;color:var(--ink-2)}
.design-check small{display:block;color:var(--muted);font-size:11.5px}
.design-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem .9rem;margin:.8rem 0 .2rem}
.design-panel .btn{white-space:normal}
.design-status{font-size:12.5px;color:var(--accent-ink);line-height:1.6;margin:.8rem 0}
.design-status:empty{display:none}
.design-result{border-top:1px solid var(--line);padding:1rem 0 .5rem;margin-top:1rem}
.design-result h3{font-size:15px}
.design-result>.muted{margin:.3rem 0 .65rem}
.design-mark-strip{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 .8rem}
.design-mark-sample{display:flex;flex-direction:column;align-items:center;min-width:62px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);padding:.35rem .25rem 0}
.design-mark-sample small{font-size:11px;color:var(--muted)}
.design-mark-sample svg{display:block}
.design-pixel-grid{gap:2px;margin:.6rem 0}
.design-pixel-grid .btn{min-height:24px;border-radius:3px;font-size:15px}
.design-specimen{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.2rem;margin:1rem 0 .65rem;overflow:hidden}
.design-specimen p{font-weight:400;overflow-wrap:anywhere;color:var(--ink);text-wrap:wrap}
.design-specimen-large{font-size:40px;line-height:1.9;margin:.4rem 0 .8rem}
.design-specimen-small{font-size:24px;line-height:2;margin:.5rem 0}
.design-result [data-font-view]>p{font-size:12px;color:var(--muted)}
.design-anchor{margin-top:1rem;padding-bottom:0}
@media(max-width:900px){.design-layout{grid-template-columns:1fr}.design-source img{height:95px}.design-layout{gap:1rem}}
@media(max-width:560px){.design-heading{padding:.85rem}.design-body{padding:0 .85rem .85rem}.design-settings{grid-template-columns:1fr}.design-budget{display:none}.design-specimen{padding:.75rem}.design-specimen-large{font-size:30px}.design-specimen-small{font-size:22px}.design-mark-sample svg{width:62px}.design-intro{align-items:flex-start}.design-intro .text-btn{flex:none}}

/* The summary is the accessible control for opening AI; no nested buttons. */
.design-heading-action{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;flex:none;background:var(--accent);color:#fff;border-radius:var(--r-md);padding:.65rem 1rem;font:600 13.5px/1.2 var(--font-ui)}
.design-heading:hover .design-heading-action{background:var(--accent-ink)}
.design-heading-action .design-chevron{color:inherit;font-size:18px;line-height:1}
.design-needs-source{border-color:var(--accent-line);background:var(--accent-soft)}
.design-needs-source .design-body{background:var(--surface)}
@media(max-width:560px){.design-heading{flex-wrap:wrap}.design-heading-action{width:100%}}

/* Installable app card (public-pwa.js) */
.pwa-card{margin:auto 8px 10px;display:flex;align-items:center;gap:2px;border-radius:10px}
.pwa-install{flex:1;display:flex;align-items:center;gap:.55rem;border:0;background:transparent;color:var(--accent-ink);font:600 13px/1.2 var(--font-ui);padding:.5rem .6rem;border-radius:8px;cursor:pointer;text-align:left}
.pwa-install:hover{background:var(--accent-soft)}
.pwa-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--accent-soft);font-size:13px}
.pwa-hide{border:0;background:transparent;color:var(--muted);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:16px;line-height:1}
.pwa-hide:hover{background:var(--sunken);color:var(--ink)}


.pwa-card:not([hidden])+.sidebar-bottom{margin-top:0}
@media (max-width:900px){.pwa-card{display:none}}

/* Thử font: extra tabs (public-trytools.js, public-buildopts.js) */
.tt-stage canvas{max-width:100%;height:auto;display:block;margin:auto;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.08);background:#fff}
.tt-stage{min-height:240px}
.tt-laser{display:grid;place-items:center;background:var(--panel,#fff);border:1px solid var(--line,#e4e2dc);border-radius:12px;padding:12px}
.tt-laser img{max-width:100%;height:auto}
.tt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.tt-row .mk-field{flex:1 1 120px}
.tt-wide{max-width:760px;display:grid;gap:12px}
#ph-canvas{cursor:grab;touch-action:none}
#ph-canvas:active{cursor:grabbing}

/* build options + licence strip + web export (public-buildopts.js) */
.check-field{display:flex;gap:8px;align-items:center;font-weight:500;margin:.4rem 0 .1rem}
.license-strip{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line,#e4e2dc);margin:10px 0;background:var(--panel,#fff)}
.license-strip p{margin:.2rem 0 0;color:var(--muted);font-size:13px}
.license-strip small{grid-column:1/-1;color:var(--muted);font-size:11.5px}
.lic-facts{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;white-space:nowrap}
.lic-facts span{display:inline-block;width:1.3em;font-weight:700;text-align:center}
.lic-ok{border-color:#9ad4ae;background:#f2fbf5}
.lic-warn{border-color:#f1c27d;background:#fff8ec}
.lic-bad{border-color:#f0a3a3;background:#fff1f1}
@media (max-width:700px){.license-strip{grid-template-columns:1fr}}
.export-css pre{white-space:pre-wrap;font-size:12px;background:#f6f5f1;border-radius:8px;padding:10px;margin:.4rem 0}
.download-word{margin-top:.6rem}

/* Tạo font từ ảnh */
.scan-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:12px 0 4px;padding:12px 16px;border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--surface);font:500 14px/1.45 var(--font-ui);color:var(--muted)}
.scan-cta b{color:var(--ink)}
#scan-dialog{max-width:980px;width:calc(100vw - 32px)}
#scan-dialog .scan-step{display:grid;gap:12px}
#scan-dialog .mk-field input{min-height:38px;padding:.4rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font:500 14.5px var(--font-ui);color:var(--ink)}
.scan-view{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.scan-view canvas{display:block;max-width:100%;height:auto}
.scan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;max-height:34vh;overflow:auto;padding:2px}
.scan-cell{display:grid;gap:4px;justify-items:center;padding:6px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.scan-cell canvas{width:56px;height:56px;border-radius:4px;background:#fff}
.scan-cell input{width:44px;text-align:center;font:600 16px var(--font-ui);padding:2px;border:1px solid var(--line-2);border-radius:4px;background:var(--surface);color:var(--ink)}
.scan-cell.unsure{border-color:#e0a100;background:color-mix(in srgb,#e0a100 10%,var(--surface))}
.scan-cell.none{opacity:.6;border-style:dashed}
.scan-view canvas[tabindex="0"]{cursor:crosshair;touch-action:none}
.scan-view.corners{overflow:hidden}
.scan-view.corners canvas{width:auto;max-height:calc(46vh - 2px);margin:0 auto}
.scan-view canvas:focus-visible{outline:2px solid var(--accent,#e0a100);outline-offset:-2px}
.scan-corner-bar{align-items:center}
.scan-corner-bar .field-help{flex:1 1 260px;margin:0}
.scan-borrow{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.scan-borrow-head{margin:0;font:500 14.5px/1.5 var(--font-ui);color:var(--muted);overflow-wrap:anywhere}
.scan-borrow-head b{color:var(--ink)}
.scan-donors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:560px){.scan-donors{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scan-donors.busy{opacity:.6;pointer-events:none}
.scan-donor{display:grid;gap:4px;min-width:0;padding:10px 12px;text-align:left;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg,#fff);color:var(--ink);cursor:pointer}
.scan-donor:hover{border-color:var(--ink)}
.scan-donor:focus-visible{outline:2px solid var(--accent,#e0a100);outline-offset:2px}
.scan-donor.on{border-color:#2a8f4a;box-shadow:inset 0 0 0 1px #2a8f4a}
.scan-donor-sample{font-size:22px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-donor-name{font:500 12px/1.3 var(--font-ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ======================================================================================
   Controls, 2026-11 redesign: one look for every slider, switch, choice and colour in the
   Studio (no browser-default widgets). Sliders get --p (filled part) from public-tryfont.js.
   ====================================================================================== */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;accent-color:var(--accent);--p:50%}
input[type=range]:disabled{cursor:not-allowed;opacity:.5}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(var(--accent),var(--accent)) 0 0/var(--p) 100% no-repeat,color-mix(in srgb,var(--ink) 12%,transparent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1.5px var(--accent),0 2px 6px rgba(20,24,60,.25);transition:transform .12s,box-shadow .12s}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]:focus-visible{box-shadow:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1.5px var(--accent),0 0 0 6px var(--accent-line)}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 1.5px var(--accent),0 2px 6px rgba(20,24,60,.25)}

/* a labelled control: label left, value right, control below */
.ctl{display:grid;gap:.45rem;min-width:0}
.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font:600 12.5px/1.2 var(--font-ui);color:var(--muted)}
.ctl-head label{cursor:pointer}
.ctl-head output{font:600 12px/1 var(--font-ui);color:var(--accent-ink);background:var(--accent-soft);padding:.25rem .5rem;border-radius:99px;font-variant-numeric:tabular-nums;min-width:2.6em;text-align:center}

/* a switch of a few choices (replaces short drop-downs) */
.seg[role=radiogroup]{display:flex;width:100%;background:var(--sunken);padding:3px;border-radius:10px;gap:2px;box-sizing:border-box}
.seg[role=radiogroup] button{flex:1 1 0;min-width:0;border:0;background:transparent;color:var(--ink-2);font:600 12.5px/1.2 var(--font-ui);padding:.5rem .55rem;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,box-shadow .15s}
.seg[role=radiogroup] button:hover{color:var(--ink)}
.seg[role=radiogroup] button[aria-checked=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,24,60,.14)}

/* on/off switch */
.switch{display:flex;align-items:center;gap:.6rem;font:500 13.5px/1.35 var(--font-ui);color:var(--ink);cursor:pointer;user-select:none}
.switch input{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:36px;height:20px;margin:0;border-radius:99px;background:color-mix(in srgb,var(--ink) 18%,transparent);cursor:pointer;transition:background .18s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(16px)}
.switch input:focus-visible{box-shadow:0 0 0 3px var(--accent-line)}

/* colour dots */
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sw{position:relative;width:28px;height:28px;border-radius:50%;border:0;padding:0;background:var(--c,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);cursor:pointer;transition:transform .12s}
.sw:hover{transform:scale(1.08)}
.sw[aria-checked=true],.sw-more.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.sw-more{display:inline-block;background:conic-gradient(#e5484d,#ffd23f,#43c26b,#36a3f5,#7b61ff,#e5484d);overflow:hidden}
.sw-more input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* inputs and drop-downs inside the Studio tools */
.mk-field input[type=text],.mk-field input[type=number],.mk-field select,.tt-side select,.tt-card select{width:100%;box-sizing:border-box;min-height:40px;font:500 14px/1.3 var(--font-ui);color:var(--ink);padding:.5rem .7rem;border:1px solid var(--line-2);border-radius:10px;background:var(--surface)}
.mk-field select,.tt-side select,.tt-card select{-webkit-appearance:none;appearance:none;padding-right:2rem;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .75rem center/12px 8px no-repeat}
.mk-field input:focus,.mk-field select:focus,.mk-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-line)}
.mk-field textarea{border-radius:10px}

/* the tool panels: a calm card beside the picture */
.tt-side{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;gap:14px}
.tt-side>.btn.primary,.tt-actions .btn.primary{min-height:42px}
.tt-actions{display:flex;gap:8px;flex-wrap:wrap}
.tt-actions .btn{flex:1 1 auto}
.tt-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tt-line .seg{flex:1 1 150px}
.tt-pick{display:flex;align-items:center;gap:12px;padding:12px;border:1.5px dashed var(--line-2);border-radius:12px;cursor:pointer;background:var(--sunken);transition:border-color .15s,background .15s}
.tt-pick:hover{border-color:var(--accent);background:var(--accent-soft)}
.tt-pick-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--surface);color:var(--accent-ink);font:600 20px/1 var(--font-ui)}
.tt-pick b{display:block;font:600 14px/1.3 var(--font-ui);color:var(--ink)}
.tt-pick small{display:block;font:500 12px/1.35 var(--font-ui);color:var(--muted);overflow-wrap:anywhere}
.tt-card{max-width:680px;display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.tt-card h3{margin:0;font:600 18px/1.3 var(--font-display,var(--font-ui))}
.tt-card p{margin:0}
.tt-card .tt-actions .btn{flex:0 0 auto}
.tt-stage canvas{max-height:72vh}

/* Mượn dấu: one card per font, its marks drawn in that font */
.donors{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.donor{display:grid;gap:2px;text-align:left;border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:0}
.donor:hover{border-color:var(--accent-line)}
.donor[aria-checked=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-line)}
.donor-sample{font-size:26px;line-height:1.25;color:var(--ink)}
.donor b{font:600 13px/1.3 var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donor small{font:500 11.5px/1.3 var(--font-ui);color:var(--muted)}

/* Thử font navigation: group (pill switch) → tools (underlined) → variant (small switch) */
.try-nav{display:grid;gap:10px;margin:2px 0 14px}
.try-groups{display:flex;gap:4px;background:var(--sunken);padding:4px;border-radius:12px;overflow-x:auto;scrollbar-width:none}
.try-groups::-webkit-scrollbar{display:none}
.try-group{flex:1 0 auto;border:0;background:transparent;color:var(--ink-2);font:600 14px/1.2 var(--font-ui);padding:.62rem 1rem;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.try-group:hover{color:var(--ink)}
.try-group.active{background:var(--surface);color:var(--accent-ink);box-shadow:0 1px 4px rgba(20,24,60,.14)}
.try-sub{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.try-subtabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.try-subtabs::-webkit-scrollbar{display:none}
.try-subtab{border:0;background:transparent;color:var(--muted);font:600 13.5px/1.2 var(--font-ui);padding:.55rem .75rem;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.try-subtab:hover{color:var(--ink)}
.try-subtab.active{color:var(--ink);border-bottom-color:var(--accent)}
.try-sub>.seg[role=radiogroup]{width:auto;flex:0 0 auto;margin-bottom:6px}
.try-sub>.seg[role=radiogroup] button{flex:0 0 auto;padding:.38rem .8rem}
@media (max-width:760px){.try-group{flex:0 0 auto;padding:.55rem .8rem}.try-sub>.seg[role=radiogroup]{width:100%}.try-sub>.seg[role=radiogroup] button{flex:1 1 0}}
.donors>p{grid-column:1/-1;margin:0}
.lab-field select,.art-panel select,.family-share~select{-webkit-appearance:none;appearance:none;min-height:38px;padding:.45rem 2rem .45rem .7rem;border:1px solid var(--line-2);border-radius:10px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .75rem center/12px 8px no-repeat;font:500 14px/1.3 var(--font-ui);color:var(--ink)}
.ico-learn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4L2 8l8 4 8-4z'/%3E%3Cpath d='M5.5 9.8v3.7c0 1 2 2.5 4.5 2.5s4.5-1.5 4.5-2.5V9.8M18 8v4.5'/%3E%3C/svg%3E")}
.ctl>*,.tt-side>*{min-width:0}
.seg[role=radiogroup] button{min-width:0}
.tt-side .seg[role=radiogroup] button{flex:1 1 auto;padding-left:.45rem;padding-right:.45rem}
/* Tập viết: five exercises do not fit one row of the side panel; wrap into a grid so every label reads in full */
#pr-mode.seg[role=radiogroup]{display:grid;grid-template-columns:repeat(3,1fr)}
#pr-mode.seg[role=radiogroup] button{white-space:normal;overflow:visible;text-overflow:clip;padding:.5rem .3rem}
/* Thử font / Dạy học: fonts mẫu (listed after the user's own fonts) */
.try-demo-head{margin:1rem 0 .4rem;font:600 11.5px/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.try-font.demo .try-font-head small{color:var(--accent-ink)}
.try-own{margin:0 0 .6rem;padding:.8rem .9rem;border:1px dashed var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft)}
.try-own p{margin:.3rem 0 .6rem;font-size:13px;color:var(--muted)}
.try-demo-note{margin:0 0 1rem;padding:1rem 1.1rem;border:1px solid var(--accent-line);border-radius:var(--r-md);background:var(--accent-soft)}
.try-demo-note p{margin:.35rem 0 .8rem;color:var(--muted)}
.try-panel.demo-blocked>:not(.try-demo-note){display:none}
@media (max-width:900px){.try-fonts>.try-demo-head{display:none}.try-fonts>.try-own{flex:none;width:240px;margin:0}}
/* Tập viết: page switcher for multi-page sheets */
.tt-pages{display:flex;align-items:center;justify-content:center;gap:10px;font:600 13px/1 var(--font-ui);color:var(--muted)}
.tt-pages .btn{min-width:36px}
.pr-book{display:flex;align-items:center;gap:6px}
.pr-book label{display:flex;align-items:center;gap:6px;flex:1 1 auto;background:var(--sunken);border-radius:10px;padding:.3rem .6rem;font:600 13px/1.2 var(--font-ui);color:var(--ink-2)}
.pr-book input{flex:1 1 auto;min-width:0;width:3em;border:0;background:transparent;font:700 15px/1.2 var(--font-ui);color:var(--ink);outline:none}
.pr-book label:focus-within{box-shadow:0 0 0 2px var(--accent-line)}
#hw-dialog{max-width:960px;width:calc(100vw - 32px)}
#hw-dialog [hidden]{display:none!important}
#hw-dialog>.seg[role=radiogroup]{margin:10px 0 14px}
.hw-pane{margin-bottom:14px}
.hw-write{display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);min-width:0;gap:18px;align-items:start}
.hw-padcol,.hw-side{display:grid;gap:10px;min-width:0}
.hw-padhead{display:flex;align-items:center;gap:8px}
.hw-now{flex:1 1 auto;margin:0;text-align:center;font:600 14.5px/1.3 var(--font-ui);color:var(--ink);white-space:pre;overflow:hidden;text-overflow:ellipsis}
.hw-nav{min-width:44px;font-size:20px;line-height:1}
.hw-padbox{border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:#fffefb;box-shadow:inset 0 1px 3px rgba(20,24,60,.08)}
#hw-pad{display:block;width:100%;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
#hw-pad:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent-line)}
.hw-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hw-tools .seg[role=radiogroup]{width:auto;flex:1 1 170px}
.hw-padcol .field-help{margin:0}
#hw-group.seg[role=radiogroup]{display:grid;grid-template-columns:repeat(4,1fr)}
.hw-side .seg[role=radiogroup] button{font-size:11.5px;padding:.45rem .2rem}
.hw-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;max-height:228px;overflow:auto;padding:2px}
.hw-chip{display:grid;place-items:center;min-height:42px;padding:2px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--muted);font:600 16px/1 var(--font-ui);cursor:pointer;transition:border-color .15s,background .15s}
.hw-chip.mark{font-size:11.5px;grid-column:span 2}
.hw-chip:hover{border-color:var(--accent-line);color:var(--ink)}
.hw-chip.done{background:var(--sunken);border-color:var(--line)}
.hw-chip[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-line);color:var(--ink)}
.hw-chip canvas{display:block;pointer-events:none}
.hw-progress{display:grid;gap:6px}
.hw-progress p{margin:0;font:500 13px/1.45 var(--font-ui);color:var(--ink-2)}
.hw-meter{height:6px;border-radius:99px;background:var(--sunken);overflow:hidden}
.hw-meter i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .25s}
.hw-preview{display:grid;gap:6px}
.hw-preview .mk-field{display:grid;gap:4px;font:600 12.5px var(--font-ui);color:var(--ink-2)}
#hw-pview{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:#fffefb}
.hw-wipe{justify-self:start;color:var(--muted)}
.hw-wipe.danger{color:#b42318;border-color:#f3b5ae}
.hw-build{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.hw-lab{display:block;margin-bottom:6px;font:600 13px var(--font-ui);color:var(--ink-2)}
.hw-modebox .field-help{margin:6px 0 0}
#hw-mode.seg[role=radiogroup] button{white-space:normal;overflow:visible;text-overflow:clip}
.hw-go{align-items:flex-end}
.hw-go .mk-field{display:grid;gap:4px;flex:1 1 220px;font:600 12.5px var(--font-ui);color:var(--ink-2)}
@media (max-width:760px){.hw-write{grid-template-columns:minmax(0,1fr)}#hw-group.seg[role=radiogroup]{grid-template-columns:repeat(2,1fr)}.hw-chips{max-height:none}.hw-chip{min-height:40px}}
#hw-dialog .mk-field input{min-height:38px;padding:.4rem .6rem;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font:500 14.5px var(--font-ui);color:var(--ink)}
.hw-steps{display:grid;gap:14px;margin:6px 0 4px;padding-left:1.3em;font:500 14.5px/1.5 var(--font-ui);color:var(--ink-2)}
.hw-steps li>.tt-row,.hw-steps li>.seg{margin-top:8px}
.hw-steps .field-help{margin:6px 0 0}
.hw-report{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.hw-report canvas{display:block;width:100%;height:auto;border-radius:6px;background:#fff}
.hw-report ul{margin:0;padding-left:1.1em;font:500 14px/1.55 var(--font-ui);color:var(--ink-2)}
.hw-chars{font-weight:600;color:var(--ink);word-break:break-word}