*{box-sizing:border-box}:root{color:#26313a;background:#eeeee9;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;letter-spacing:0;text-rendering:optimizeLegibility}body{height:100%;margin:0;min-width:320px;overflow:hidden}html,#root{height:100%}button,input,textarea{font:inherit}button{align-items:center;background:#fff;border:1px solid rgba(38,49,58,.14);border-radius:8px;color:#26313a;cursor:pointer;display:inline-flex;gap:8px;height:38px;justify-content:center;padding:0 12px;transition:background .16s ease,border-color .16s ease,transform .16s ease}button:hover{background:#f5f7f3;border-color:#3f7f9f5c}button:active{transform:translateY(1px)}.app-shell{display:grid;grid-template-columns:minmax(320px,390px) minmax(0,1fr);height:100svh;overflow:hidden}.control-pane{background:#f8f7f2;border-right:1px solid rgba(38,49,58,.12);display:flex;flex-direction:column;gap:18px;min-height:0;overflow:auto;padding:24px}.app-header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between}.eyebrow{color:#3f7f9f;font-size:12px;font-weight:700;letter-spacing:.12em;margin:0 0 8px;text-transform:uppercase}h1{font-size:clamp(24px,6vw,32px);line-height:.95;margin:0}.mode-toggle{background:#ededdf;border:1px solid rgba(38,49,58,.12);border-radius:10px;display:inline-flex;padding:3px}.mode-toggle button{background:transparent;border:0;border-radius:7px;height:32px;padding:0;width:32px}.mode-toggle button.active{background:#fff;box-shadow:0 1px 4px #26313a1f}.control-group{border-top:1px solid rgba(38,49,58,.1);display:grid;gap:14px;padding-top:18px}.starter-control{border-top:1px solid rgba(38,49,58,.1);display:grid;gap:8px;padding-top:18px}.starter-control label{color:#26313ab8;display:grid;font-size:13px;font-weight:700;gap:8px}.starter-control p{color:#26313a8f;font-size:12px;line-height:1.45;margin:0}.colour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.colour-control,.range-control,.font-controls label{color:#26313ab8;display:grid;font-size:13px;font-weight:600;gap:8px}.colour-control{align-items:center;background:#fff;border:1px solid rgba(38,49,58,.1);border-radius:8px;grid-template-columns:1fr auto;padding:10px}input[type=color]{background:transparent;border:0;height:28px;padding:0;width:42px}.colour-control input[type=text]{background:#f8f7f2;border:1px solid rgba(38,49,58,.1);border-radius:6px;color:#26313a;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;grid-column:1 / -1;min-width:0;padding:7px 8px;text-transform:lowercase;width:100%}.range-control span{align-items:center;display:flex;justify-content:space-between}.range-control strong{color:#26313a;font-size:12px;font-variant-numeric:tabular-nums}input[type=range]{accent-color:#3f7f9f;width:100%}.font-controls input,.font-controls select,.starter-control select,.css-output textarea{background:#fff;border:1px solid rgba(38,49,58,.12);border-radius:8px;color:#26313a;min-width:0;padding:10px 12px}.actions{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:auto}.actions button{padding:0 10px}.workspace{background:linear-gradient(90deg,rgba(63,127,159,.08),transparent 30%),#e9e9e3;display:grid;gap:18px;grid-template-rows:auto minmax(0,1fr) minmax(150px,22vh);height:100%;min-width:0;overflow:hidden;padding:18px}.preview-toolbar,.section-title{align-items:center;color:#26313aad;display:flex;font-size:13px;font-weight:700;justify-content:space-between}.preview-toolbar div,.section-title span:first-child{align-items:center;display:inline-flex;gap:8px}.preview-toolbar>span,.section-title span:last-child{color:#26313a70;font-size:12px;text-transform:uppercase}.mochi-preview{background:var(--preview-page);border:1px solid var(--preview-border-strong);border-radius:10px;box-shadow:0 18px 45px #26313a21;color:var(--preview-text);display:grid;font-family:var(--preview-body-font);grid-template-columns:190px minmax(0,1fr);height:100%;min-height:0;overflow:hidden}.preview-sidebar{background:var(--preview-sidebar);border-right:1px solid var(--preview-border);display:flex;flex-direction:column;gap:10px;min-height:0;padding:14px}.account-name{color:var(--preview-muted);font-size:17px;font-weight:700}.plan-pill{align-self:flex-start;background:color-mix(in srgb,var(--preview-text) 9%,transparent);border-radius:calc(var(--preview-radius) - 3px);color:var(--preview-muted);font-size:11px;font-weight:700;padding:3px 8px;text-transform:uppercase}.search{background:color-mix(in srgb,var(--preview-text) 6%,transparent);border:1px solid var(--preview-border);border-radius:var(--preview-radius);color:var(--preview-muted);font-size:13px;margin:6px 0 10px;padding:9px 10px}.preview-sidebar nav{display:grid;gap:4px}.preview-sidebar nav strong{color:var(--preview-subtle);font-size:11px;letter-spacing:.06em;padding:10px 10px 2px;text-transform:uppercase}.preview-sidebar nav span{border-radius:var(--preview-radius);color:var(--preview-muted);font-size:13px;padding:8px 10px}.preview-sidebar nav .selected{background:color-mix(in srgb,var(--preview-primary) 14%,transparent);color:var(--preview-text)}.preview-main{background-color:var(--preview-frame);background-image:none;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);min-width:0;overflow:hidden}.preview-topbar{align-items:center;background:var(--preview-frame);border-bottom:1px solid var(--preview-border);display:flex;gap:12px;justify-content:space-between;min-width:0;padding:12px 16px}.breadcrumbs{align-items:center;color:var(--preview-muted);display:flex;flex-wrap:wrap;gap:8px;min-width:0}.breadcrumbs span:after{color:var(--preview-subtle);content:"/";margin-left:8px}.breadcrumbs strong{color:var(--preview-primary)}.top-actions{align-items:center;display:flex;flex-shrink:0;gap:8px}.top-actions button,.view-toolbar button{background:var(--preview-card);border-color:var(--preview-border);color:var(--preview-text);height:30px}.cram-group{border:1px solid var(--preview-border);border-radius:var(--preview-radius);display:inline-flex;overflow:hidden}.cram-group button{border:0;border-radius:0}.cram-group button+button{border-left:1px solid var(--preview-border);width:32px}.cram-group span{background:color-mix(in srgb,var(--preview-text) 12%,transparent);border-radius:999px;padding:2px 7px}.preview-progress{background:color-mix(in srgb,var(--preview-text) 10%,transparent);border-radius:999px;height:6px;margin:12px 16px 0;overflow:hidden}.preview-progress span{background:var(--preview-primary);display:block;height:100%;width:72%}.view-toolbar{align-items:center;display:grid;gap:8px;grid-template-columns:auto auto 1fr auto auto;min-height:0;padding:12px 16px}.view-toolbar .primary{background:var(--preview-card);color:var(--preview-text)}.outline-preview.muted{color:var(--preview-muted)}.preview-list{display:grid;gap:14px;grid-auto-rows:minmax(130px,1fr);min-height:0;overflow:hidden;padding:10px 16px 16px}.preview-card-row{background:var(--preview-card);border:1px solid var(--preview-border);border-radius:var(--preview-radius);box-shadow:var(--preview-shadow);display:grid;grid-template-rows:1fr auto;min-height:0;overflow:hidden}.card-body{padding:clamp(24px,4vh,38px) clamp(26px,4vw,46px)}.preview-card-row h2{color:var(--preview-red);font-size:clamp(22px,2.6vw,32px);line-height:1.2;margin:0 0 18px}.preview-card-row p{color:var(--preview-muted);font-size:clamp(18px,2vw,24px);font-style:italic;line-height:1.35;margin:0}.preview-card-row mark{background:var(--preview-mark);border-radius:calc(var(--preview-radius) - 4px);display:inline-block;height:1.2em;min-width:80px;vertical-align:-.15em}.preview-card-row footer{align-items:center;background:color-mix(in srgb,var(--preview-text) 3%,transparent);border-top:1px dashed var(--preview-border);color:var(--preview-muted);display:flex;flex-wrap:wrap;gap:14px;padding:9px 14px}.preview-card-row footer strong{color:var(--preview-primary);margin-left:auto}.tag{background:color-mix(in srgb,var(--preview-primary) 12%,transparent);border:1px solid var(--preview-border);border-radius:999px;color:var(--preview-primary);font-family:var(--preview-mono-font);font-size:12px;padding:4px 8px}.css-output{background:#ffffff9e;border:1px solid rgba(38,49,58,.1);border-radius:10px;display:grid;gap:10px;min-height:0;padding:12px}.css-output textarea{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.5;min-height:0;resize:none;width:100%}@media(max-width:980px){body{overflow:auto}.app-shell{grid-template-columns:1fr;height:auto;min-height:100svh;overflow:visible}.control-pane{border-right:0;border-bottom:1px solid rgba(38,49,58,.12);overflow:visible}.workspace{height:auto;grid-template-rows:auto minmax(520px,68vh) 260px;overflow:visible}}@media(max-width:720px){.control-pane,.workspace{padding:14px}.actions,.colour-grid,.mochi-preview{grid-template-columns:1fr}.preview-sidebar{border-right:0;border-bottom:1px solid var(--preview-border)}.preview-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-topbar,.view-toolbar{align-items:stretch;grid-template-columns:1fr}.preview-topbar,.top-actions,.view-toolbar{flex-wrap:wrap}.preview-card-row footer strong{margin-left:0}}