/* Only the design-system workbench, not product screens. */
body{margin:0;background:#07112c;color:#f7faff}
.ds-preview{padding:32px 4vw 80px;max-width:1560px;margin:auto}
.ds-preview__header{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:12px 0 24px;border-bottom:1px solid #6e84ba78}
.ds-preview__header img{width:165px;max-height:52px;object-fit:contain}
.ds-preview__header aside{font-size:13px;color:#d6e3f5;max-width:440px}
.ds-preview__title{margin:35px 0 15px;font-size:44px;letter-spacing:-.035em;line-height:1.05}
.ds-preview__subtitle{color:#c7d8f1;font-size:17px;max-width:850px;line-height:1.5}
.ds-section{margin-top:48px}
.ds-section__title{font-size:29px;line-height:36px;margin:0 0 8px}
.ds-section__lead{color:#c7d8f1;margin:0 0 22px;max-width:800px;font-size:15px}
.ds-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ds-samples .ds-panel{min-width:0}
.ds-swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ds-swatch{background:#162454;border:1px solid #627cb391;border-radius:16px;overflow:hidden}
.ds-swatch__color{height:92px}
.ds-swatch__label{padding:12px;font-size:12px;color:#e4edfa;font-weight:700;word-break:break-word}
.ds-swatch__label small{display:block;color:#bbcced;margin-top:4px;font-weight:500}
.ds-type-sample{border-bottom:1px solid #627cb37a;padding:16px 0;display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.ds-type-sample strong{font-weight:700}
.ds-type-sample small{color:#c7d8f1}
.ds-example-note{color:#c7d8f1;font-size:13px;line-height:1.55}
.ds-preview__code{color:#b0ecf7;font-size:12px;font-family:ui-monospace,Menlo,monospace}
.ds-preview__label{font-size:12px;letter-spacing:.1em;color:#a9f0f7;text-transform:uppercase;font-weight:800;margin:0 0 15px}
.ds-feature-card{border:1px solid #7197c29f;border-radius:24px;overflow:hidden;background:#132757}
.ds-feature-card img{width:100%;height:180px;display:block;object-fit:cover}
.ds-feature-card__copy{padding:20px;display:grid;gap:10px}
.ds-feature-card__copy h3{margin:0;font-size:22px}
.ds-feature-card__copy p{margin:0;color:#c7d8f1;font-size:14px}
.ds-matrix{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}
.ds-matrix th,.ds-matrix td{text-align:left;padding:11px;border-bottom:1px solid #506aa0a2}
.ds-matrix th{color:#a9f0f7}
.ds-rail-showcase{display:flex;gap:26px;align-items:flex-start}
.ds-rail-showcase__copy{max-width:520px}
.ds-rail-showcase__copy h3{margin-top:0}
.ds-logo-asset{display:block;width:112px;height:94px;object-fit:contain;margin:0 auto 16px}
.ds-rail__item{position:relative}
.ds-fallback-icon{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ds-fallback-icon[hidden]{display:none}
.ds-preview .ds-dialog{font-family:var(--inoowa-font-family)}
.ds-preview .ds-dialog::backdrop{background:#071029cf}
.ds-contrast{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ds-contrast span{background:#71e5f1;color:#092047;border-radius:12px;padding:13px 17px;font-weight:800}
.ds-contrast em{font-size:13px;color:#c7d8f1;font-style:normal}
@media(max-width:900px){
 .ds-samples{grid-template-columns:1fr}
 .ds-swatch-grid{grid-template-columns:repeat(2,1fr)}
 .ds-preview__header{flex-direction:column;align-items:flex-start}
 .ds-preview__title{font-size:35px}
}

/* Honest empty-state symbol: blank physical paper, not a pretend saved drawing. */
.ds-empty-paper{
 position:relative;width:106px;height:115px;border-radius:10px;
 border:2px solid #cddcf9;background:linear-gradient(135deg,#fffdf4,#e5edfa);
 transform:rotate(-6deg);
 box-shadow:0 12px 23px #050d35a5,7px -5px 0 #c4d5f5;
}
.ds-empty-paper:after{
 content:'';position:absolute;left:24px;right:24px;bottom:26px;height:3px;
 background:#8db9d6;border-radius:3px;box-shadow:0 -14px #adc5df,0 -28px #adc5df;
}