#view-moodbook{--mb-ink:#263139;--mb-line:#ddd9d2;color:var(--mb-ink)}
.mb-panel{padding:clamp(18px,3vw,30px);background:#faf8f4;border:1px solid var(--mb-line);border-radius:22px;margin-bottom:24px}
.mb-panel h3{margin:0 0 14px}.mb-families,.mb-moods,.mb-controls,.mb-current,.mb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.mb-families{margin-bottom:20px}.mb-family,.mb-pill,.mb-current button{border:1px solid var(--mb-line);background:#fff;border-radius:999px;padding:9px 13px;color:var(--mb-ink);cursor:pointer}.mb-family span{display:inline-block;width:20px;height:20px;background:var(--chip);border-radius:50%;vertical-align:middle;margin-right:7px}.mb-pill[aria-pressed=true]{background:#273c38;color:#fff}.mb-controls{margin:20px 0}.mb-controls label{display:flex;align-items:center;gap:7px}.mb-controls input[type=text]{width:120px}.mb-controls select{max-width:150px}.mb-current:empty{display:none}.mb-count{font-weight:700;margin:18px 0}
.mb-group{margin:28px 0 36px}.mb-group h3{font-size:1.35rem}.mb-group h3 small{font-size:.8rem;color:#687277}.mb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}.mb-card{min-width:0;border:1px solid var(--mb-line);border-radius:17px;background:#fff;overflow:hidden}.mb-card-open{display:block;width:100%;border:0;background:transparent;text-align:left;padding:0;cursor:pointer;color:inherit}.mb-card-open strong,.mb-card-open small{display:block;padding:0 15px}.mb-card-open strong{margin-top:14px;font-size:1.05rem}.mb-card-open small{margin:4px 0 12px;color:#687277;line-height:1.4}.mb-swatch{display:flex;height:150px}.mb-swatch i{flex:1}.mb-card p{padding:0 15px;font-size:.84rem;color:#465254}.mb-card-foot{display:flex;justify-content:space-between;align-items:center;padding:0 15px 14px;gap:8px}.mb-card-foot span{font-size:.8rem;color:#687277}.mb-card-foot button{font-size:1.5rem;border:0;background:transparent;cursor:pointer;color:#9c4e68}.mb-empty{padding:35px;border:1px dashed #c3c8c4;border-radius:18px;background:#fbfaf7;line-height:1.7}
.mb-dialog{width:min(900px,calc(100vw - 24px));max-height:90vh;border:0;border-radius:20px;padding:clamp(18px,3vw,32px);color:var(--mb-ink)}.mb-dialog::backdrop{background:rgba(14,28,31,.65)}.mb-close{float:right}.mb-detail-colors{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.mb-detail-colors>div{display:grid;gap:5px;min-width:90px}.mb-detail-colors button[data-copy]{width:100%;height:72px;border:1px solid #8885;border-radius:10px;cursor:pointer}.mb-detail-colors code{font-size:.85rem}.mb-detail-colors button[data-find]{border:0;background:transparent;text-decoration:underline;cursor:pointer}.mb-ratio{display:flex;height:65px;margin:12px 0;border-radius:8px;overflow:hidden}.mb-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.mb-example{min-height:140px;padding:18px;background:var(--a);color:var(--b);border-radius:10px;display:flex;flex-direction:column;justify-content:space-between}.mb-example--news{background:var(--b);color:var(--a)}.mb-example--web{background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);color:#fff}.mb-role{border:1px solid var(--mb-line);padding:18px;border-radius:12px;margin:20px 0}.mb-actions{margin:20px 0}.mb-dialog textarea{width:100%;min-height:100px}
#view-moodbook button:focus-visible,#view-moodbook input:focus-visible,#view-moodbook select:focus-visible,.mb-dialog button:focus-visible{outline:3px solid #2b6b6b;outline-offset:3px}
@media(max-width:600px){.mb-controls{align-items:stretch}.mb-controls label{width:100%;justify-content:space-between}.mb-controls select,.mb-controls input[type=text]{max-width:none;width:60%}.mb-examples{grid-template-columns:1fr}.mb-detail-colors>div{width:calc(50% - 6px)}.mb-dialog{max-height:94vh}}
.mb-credit{display:block;padding:0 15px 14px;color:#687277}

/* Match the lab's navy/blue surfaces and spacing. */
#view-moodbook{--mb-ink:var(--ink);--mb-line:var(--line)}
.mb-panel{margin-bottom:28px;padding:clamp(18px,2.4vw,26px);border-color:#e2e7ef;border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 12px 30px rgba(35,49,76,.06)}
.mb-panel h3{color:#23334e;font-size:16px}.mb-controls{gap:12px 18px;margin:22px 0 26px}.mb-controls label{color:#52627a;font-size:12px;font-weight:700}.mb-controls input[type=text],.mb-controls select,.mb-controls input[type=color]{min-height:40px;border:1px solid #dce2eb;border-radius:9px;background:#fcfdff;color:#172033;padding:7px 10px}.mb-controls input[type=color]{width:48px;padding:4px;cursor:pointer}
.mb-family,.mb-pill,.mb-current button{border-color:#d7dee9;border-radius:10px;color:#33435d;font-size:13px;font-weight:700}.mb-family:hover,.mb-pill:hover,.mb-current button:hover{border-color:#9bb4d8;background:#f3f7ff}.mb-pill[aria-pressed=true]{border-color:#2563eb;background:#2563eb;color:#fff}
.mb-moods{gap:10px}.mb-current:not(:empty){margin-top:18px;padding-top:16px;border-top:1px solid #e7ecf3;gap:10px}.mb-current button{border-color:#c9dcff;background:#e9f1ff;color:#1d4ed8}
.mb-count{margin:22px 0 12px;color:#263653}.mb-group{margin:30px 0 46px}.mb-group h3{margin:0 0 18px;color:#26354d;font-size:20px}.mb-grid{gap:20px}.mb-card{border-color:#e3e8f0;border-radius:14px;box-shadow:0 8px 22px rgba(35,49,76,.045);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.mb-card:hover{transform:translateY(-2px);border-color:#cbd6e6;box-shadow:0 16px 32px rgba(35,49,76,.10)}.mb-card-foot button{color:#56729d}.mb-credit{color:#647085;line-height:1.5}.mb-credit a{color:#405779;text-underline-offset:2px}
.mb-group>.button[data-action=more]{margin-top:24px;padding:10px 16px}.mb-dialog{border:1px solid #e1e7ef;box-shadow:0 22px 60px rgba(23,32,51,.18)}.mb-role{border-color:#e1e7ef;border-radius:14px;background:#fcfdff}
@media(max-width:600px){.mb-panel{margin-bottom:24px}.mb-group{margin:26px 0 38px}.mb-grid{gap:18px}.mb-group>.button[data-action=more]{margin-top:20px}}
.mb-card-view{display:block;margin:0 15px 14px;color:#2563eb;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px}.mb-card-open:hover .mb-card-view{color:#1d4ed8}.mb-transfer{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.mb-transfer .button{padding:10px 13px}
.mb-ratio-field{min-width:0;margin:20px 0;padding:16px;border:1px solid #e1e7ef;border-radius:12px}.mb-ratio-field legend{padding:0 6px;font-weight:800;color:#23334e}.mb-ratio-help{margin:8px 0 14px;color:#607087;font-size:12px;line-height:1.6}.mb-ratio-choices{display:flex;flex-wrap:wrap;gap:8px}.mb-ratio-choices button{padding:8px 11px;border:1px solid #d7dee9;border-radius:9px;background:#fff;color:#33435d;font-size:12px;font-weight:700;cursor:pointer}.mb-ratio-choices button[aria-pressed=true]{border-color:#2563eb;background:#e9f1ff;color:#1d4ed8}.mb-ratio-key{display:flex;flex-wrap:wrap;gap:7px 13px;color:#52627a;font-size:12px}.mb-ratio-key span{display:inline-flex;align-items:center;gap:5px}.mb-ratio-key i{display:inline-block;width:12px;height:12px;flex:none;border:1px solid #0002;border-radius:3px}.mb-ratio-key code{font-size:11px}@media(max-width:600px){.mb-ratio-field{padding:12px}.mb-ratio-choices button{width:100%;text-align:left}}
.mb-example,.mb-example--news,.mb-example--web{position:relative;display:flex;flex-direction:column;height:218px;min-height:218px;padding:17px;overflow:hidden;border:1px solid #dce3ec;border-radius:12px;background:var(--sample-main);color:var(--sample-on-main)}
.mb-example__top,.mb-example__webbar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;letter-spacing:.04em}.mb-example__top b,.mb-example__bottom strong{flex:none;padding:5px 7px;border-radius:5px;background:var(--sample-accent);color:var(--sample-on-accent);font-size:10px;letter-spacing:0}.mb-example h4{margin:auto 0 14px;color:inherit;font-size:20px;font-weight:800;line-height:1.23;letter-spacing:-.045em;word-break:keep-all}
.mb-example__bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 -17px -17px;padding:13px 17px;background:var(--sample-support);color:var(--sample-on-support);font-size:11px;font-weight:700}.mb-example--news .mb-example__note{padding:12px;border-radius:8px;background:var(--sample-support);color:var(--sample-on-support);font-size:11px;font-weight:700;line-height:1.4}.mb-example__webbar{padding-bottom:9px;border-bottom:1px solid currentColor}.mb-example__webbar span{font-size:7px;letter-spacing:2px}.mb-example__webcontent{display:flex;flex-direction:column;gap:8px;margin:auto 0 0;padding:13px;border-radius:9px;background:var(--sample-support);color:var(--sample-on-support)}.mb-example__webcontent strong{font-size:15px;line-height:1.25}.mb-example__webcontent span{font-size:10px;line-height:1.3}.mb-example__webcontent b{align-self:flex-start;padding:7px 9px;border-radius:6px;background:var(--sample-accent);color:var(--sample-on-accent);font-size:10px}
.mb-example:has(.mb-example__chips){height:auto;min-height:250px}.mb-example__chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}.mb-example__chips span{display:inline-flex;align-items:center;min-height:21px;padding:3px 6px;border:1px solid #0002;border-radius:5px;font-size:9px;font-weight:800;line-height:1.2;white-space:nowrap}.mb-example__webcontent .mb-example__chips{margin:0}.mb-example__webcontent .mb-example__chips span{font-size:9px;line-height:1.2}

.mb-detail-tags{display:grid;gap:12px;margin:20px 0}.mb-detail-tags>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.mb-detail-tags>div>span{min-width:48px;font-size:12px;color:#607087;font-weight:700}.mb-detail-tags button{border:1px solid #ccdaf0;border-radius:999px;background:#f0f5ff;color:#284d88;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer}.mb-detail-tags button:hover{background:#dfeaff}.mb-detail-tags button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}