/* GradeKind color by number v1 */
.cbn-tool{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.cbn-tool{grid-template-columns:minmax(0,1fr)}}
.cbn-tool>.card{min-width:0}
@media (min-width:901px){#cbn-preview{position:sticky;top:84px}}
.cbn-sec{margin:0 0 18px;border:0;padding:0;min-width:0}
.cbn-lab{display:block;font-weight:700;margin:0 0 8px;color:var(--color-navy);font-size:.95rem;padding:0}
.cbn-tool select,.cbn-tool input[type=number],.cbn-tool input[type=text]{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--color-border,#c9d8d5);border-radius:12px;font:inherit;font-size:1rem;background:#fff;color:var(--color-navy)}
.cbn-chips{display:flex;flex-wrap:wrap;gap:6px}
.cbn-chip{min-height:38px;padding:6px 12px;border:1px solid #cfdcd9;border-radius:999px;background:#fff;font:inherit;font-size:.86rem;font-weight:600;color:var(--color-navy);cursor:pointer;line-height:1.2}
.cbn-chip:hover{border-color:var(--color-teal,#0f7a6e)}
.cbn-chip[aria-pressed=true]{background:var(--color-teal,#0f7a6e);border-color:var(--color-teal,#0f7a6e);color:#fff}
.cbn-tables{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cbn-tables label{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;border:1px solid #cfdcd9;border-radius:10px;font-weight:700;cursor:pointer;background:#fff;color:var(--color-navy);user-select:none}
.cbn-tables input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cbn-tables label.on{background:var(--color-teal-tint,#e3f3ef);border-color:var(--color-teal,#0f7a6e);color:var(--color-teal-dark,#0b5a52)}
.cbn-tables label:focus-within{box-shadow:0 0 0 3px rgba(15,122,110,.25)}
.cbn-tables input:disabled+span{opacity:.35}
.cbn-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.cbn-row select{width:auto;flex:1}
.cbn-small{font-size:.85rem;color:var(--color-navy-soft);margin:6px 0 0}
.cbn-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px;max-height:292px;overflow:auto;padding:3px;border:1px solid #e1e8e6;border-radius:14px;background:#f8fbfa}
.cbn-pic{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px 5px;border:1px solid #dbe5e3;border-radius:12px;background:#fff;cursor:pointer;font:inherit;font-size:.7rem;line-height:1.15;color:var(--color-navy-soft);text-align:center}
.cbn-pic img{width:40px;height:40px;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:4px}
.cbn-pic[aria-pressed=true]{border-color:var(--color-teal,#0f7a6e);box-shadow:0 0 0 3px rgba(15,122,110,.2);color:var(--color-navy);font-weight:700}
.cbn-check{display:flex;align-items:center;gap:8px;min-height:40px;font-weight:600;color:var(--color-navy);cursor:pointer}
.cbn-check input{width:20px;height:20px;accent-color:var(--color-teal,#0f7a6e)}
.cbn-more{border-top:1px solid #e1e8e6;padding-top:10px;margin-top:4px}
.cbn-more summary{cursor:pointer;font-weight:700;color:var(--color-navy);min-height:40px;display:flex;align-items:center}
.cbn-more .cbn-sec{margin-top:10px}
.cbn-ptop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.cbn-ptop select{width:auto;min-width:0;flex:0 1 auto}
.cbn-tabs{display:inline-flex;gap:4px;padding:4px;background:#eef3f2;border-radius:14px}
.cbn-tabs button{min-height:38px;padding:6px 14px;border:0;border-radius:10px;background:transparent;font:inherit;font-weight:700;color:var(--color-navy-soft);cursor:pointer}
.cbn-tabs button[aria-pressed=true]{background:#fff;color:var(--color-navy);box-shadow:0 1px 4px rgba(19,33,47,.12)}
.cbn-stage{container-type:inline-size;background:#e7eeec;border-radius:16px;padding:14px}
.cbn-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.cbn-acts .btn{flex:1 1 auto}
.cbn-info{margin:10px 0 0;font-size:.9rem;color:var(--color-navy-soft)}
.cbn-msg{margin:0 0 8px;font-weight:600;color:var(--color-teal-dark,#0b5a52);min-height:1.2em;overflow-wrap:anywhere;font-size:.92rem}
.cbn-err{margin:0;padding:16px;background:#fff4f2;border:1px solid #f0b8ad;border-radius:12px;color:#8a2a1c;font-weight:600}

/* the sheet itself */
.cbn-page{background:#fff;color:#1d232a;font-family:Arial,Helvetica,sans-serif;box-shadow:0 2px 12px rgba(19,33,47,.12);border-radius:4px;padding:4.5cqw 5cqw 3.5cqw;font-size:clamp(8px,2.15cqw,15px);line-height:1.3}
.cbn-ph{display:flex;justify-content:space-between;align-items:flex-end;gap:1em;flex-wrap:wrap;border-bottom:.14em solid #1d232a;padding-bottom:.35em;margin-bottom:.55em}
.cbn-pt{font-size:1.5em;font-weight:800;letter-spacing:-.01em}
.cbn-nm{display:flex;align-items:flex-end;gap:.35em;font-size:.95em;font-weight:700}
.cbn-nm i{display:inline-block;width:10em;height:1.1em;border-bottom:1px solid #1d232a}
.cbn-nm i.cbn-short{width:5.5em}
.cbn-kmeta{font-weight:700}
.cbn-dir{margin:0 0 .6em;font-size:.9em}
.cbn-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3em 1.4em;list-style:none;margin:0 0 .75em;padding:.55em .8em;border:1px solid #8d989f;border-radius:.45em}
.cbn-key li{display:flex;align-items:center;gap:.5em;min-width:0;margin:0;padding:0}
.cbn-sw{display:inline-block;width:1.2em;height:1.2em;border:1px solid #39424a;border-radius:.22em;flex:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cbn-kn{font-weight:800;white-space:nowrap}
.cbn-kn::after{content:":"}
.cbn-ka{font-weight:400;overflow-wrap:anywhere}
.cbn-gw svg{display:block;width:100%;height:auto}
.cbn-pf{display:flex;justify-content:space-between;font-size:.72em;color:#5b656d;margin-top:.45em}
.cbn-keyfull .cbn-gw svg{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cbn-keys{display:grid;grid-template-columns:1fr 1fr;gap:.25in .3in}
.cbn-kc{font-family:Arial,Helvetica,sans-serif;font-size:10pt}
.cbn-kt{font-weight:700;margin:0 0 .4em}
.cbn-kc svg{display:block;width:100%;height:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* print */
#cbn-print{display:none}
@media print{
html.cbn-printing body>*:not(#cbn-print){display:none!important}
html.cbn-printing #cbn-print{display:block!important}
html.cbn-printing,html.cbn-printing body{background:#fff!important;margin:0!important;padding:0!important}
#cbn-print .cbn-page{box-shadow:none;border-radius:0;padding:0;font-size:11pt;break-after:page;page-break-after:always}
#cbn-print .cbn-gw{width:6.8in;margin:0 auto}
#cbn-print .cbn-keys{break-after:page;page-break-after:always;padding-top:.1in}
#cbn-print .cbn-keys:last-child,#cbn-print .cbn-page:last-child{break-after:auto;page-break-after:auto}
#cbn-print .cbn-kc .cbn-gw{width:auto}
}

/* online coloring */
.cbn-play{position:fixed;inset:0;z-index:200;background:#f2f6f5;overflow:auto;-webkit-overflow-scrolling:touch}
.cbn-play[hidden]{display:none}
html.cbn-playing,html.cbn-playing body{overflow:hidden}
.cbn-pbar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;background:rgba(255,255,255,.95);border-bottom:1px solid #dbe4e2}
.cbn-pbar h2{font-size:1.1rem;margin:0 auto 0 0;color:var(--color-navy,#13212f)}
.cbn-pdir{margin:12px 16px 0;color:var(--color-navy-soft,#4a5a6b);font-weight:600}
.cbn-pal{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 0}
.cbn-pal button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 12px 6px 8px;border:2px solid #d4dedc;border-radius:12px;background:#fff;font:inherit;font-weight:700;color:var(--color-navy,#13212f);cursor:pointer}
.cbn-pal button small{font-size:.85rem;font-weight:600;color:var(--color-navy-soft,#4a5a6b)}
.cbn-pal button[aria-pressed=true]{border-color:#13212f;box-shadow:0 0 0 3px rgba(19,33,47,.18)}
.cbn-pal .cbn-sw{width:24px;height:24px;border-radius:6px}
.cbn-erase{background:repeating-linear-gradient(45deg,#fff 0 4px,#e5e9ec 4px 8px)!important}
.cbn-pmsg{margin:10px 16px 0;min-height:1.3em;font-weight:700;color:var(--color-navy,#13212f)}
.cbn-pmsg.cbn-ok{color:#0b5a52;font-size:1.15rem}
.cbn-board{padding:10px 16px 28px;overflow:auto}
.cbn-board .cbn-svg{display:block;width:100%;max-width:860px;min-width:540px;margin:0 auto;background:#fff;box-shadow:0 2px 12px rgba(19,33,47,.1);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cbn-board .cbn-r{cursor:pointer}
.cbn-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.cbn-figure{margin:18px 0}
.cbn-figure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #dbe4e2;background:#fff}
.cbn-figure figcaption{font-size:.9rem;color:var(--color-navy-soft);margin-top:6px}
.cbn-levels{width:100%;border-collapse:collapse;margin:10px 0 16px}
.cbn-levels th,.cbn-levels td{padding:8px 10px;border-top:1px solid #d5e0dd;text-align:left;vertical-align:top}
.cbn-levels thead{background:var(--color-teal-tint,#e3f3ef)}
.cbn-tablewrap{overflow-x:auto}