/* Sequence workbench and family viewer use the existing theme and model engine. */
.motif-lab,.family-view{color:var(--text);max-width:1440px;margin:auto;padding:24px}
.motif-heading{max-width:820px;margin:0 0 24px}.motif-heading h1,.family-view h1{font:500 clamp(32px,4vw,52px)/1.1 Georgia,serif;letter-spacing:-.035em;margin:10px 0 14px}.motif-lab p,.family-view p{line-height:1.65;color:var(--muted)}
.motif-layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:20px;align-items:start}.motif-input,.motif-model,.motif-notes,.family-explanation>div{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;min-width:0}
.motif-input label,.family-toolbar label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}.motif-input textarea{display:block;width:100%;min-height:135px;resize:vertical;font:14px/1.65 monospace;padding:12px;background:var(--surface-soft);color:var(--text);border:1px solid var(--line);border-radius:12px;box-sizing:border-box}.motif-input select{width:100%;min-width:0;margin:0 0 16px}.motif-input p{font-size:12px}.motif-input form{margin-bottom:24px}.motif-input form button{width:100%;white-space:normal}.motif-input [data-status]{padding:12px 0 20px;font-size:13px;line-height:1.6}.motif-input [data-status][data-error="true"]{color:var(--text);font-weight:600}.motif-input .text-link{white-space:normal;text-align:left}
.motif-model{padding:0;overflow:hidden}.motif-model-head{padding:20px 22px 10px;display:flex;gap:15px;justify-content:space-between;align-items:center}.motif-model h2{font:500 23px/1.2 Georgia,serif;margin:10px 0}.motif-badge{color:var(--mint);font-size:9px;letter-spacing:.1em;font-weight:600}.motif-camera{display:flex;gap:5px;flex-shrink:0}.motif-camera button{padding:8px 12px}.motif-canvas,.family-canvas{position:relative;background:var(--surface-soft);height:clamp(340px,53svh,620px);overflow:hidden}.motif-canvas canvas,.family-canvas canvas{display:block;width:100%;height:100%;touch-action:none}.motif-canvas [data-empty]{position:absolute;inset:45% 0 auto;text-align:center}.motif-fold{padding:16px 22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-top:1px solid var(--line)}.motif-fold label{flex:1;min-width:180px;font-size:12px}.motif-fold input{width:100%;margin-top:10px}.motif-fold small{width:100%;color:var(--muted);font-size:11px;line-height:1.5}.motif-sequence{padding:0 22px 22px;font-size:12px}.motif-sequence code{display:block;overflow-wrap:anywhere;white-space:normal;color:var(--text);line-height:1.8;background:var(--surface-soft);border-radius:8px;padding:12px}.motif-notes{margin-top:20px;font-size:13px}.motif-notes summary{font-weight:600;cursor:pointer}.motif-notes:not([open])>*:not(summary){display:none}.motif-notes a,.family-view a{color:var(--mint);text-decoration:underline}
.teaching-switch{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.teaching-switch[hidden]{display:none}.teaching-switch label{font-size:12px;display:flex;gap:10px;align-items:center}.teaching-switch select{max-width:240px}.teaching-switch #primaryStructureLabel{font-size:12px;color:var(--muted)}
.family-view{padding-top:8px}.family-view>header{display:flex;gap:20px;align-items:center;justify-content:space-between}.family-view>header p{max-width:800px;font-size:13px}.family-toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:14px 0}.family-toolbar label{margin:0;max-width:min(100%,480px)}.family-toolbar select{display:block;max-width:100%;margin-top:8px}.family-toolbar button{min-height:40px}.family-canvas{border:1px solid var(--line);border-radius:20px;height:clamp(360px,60svh,720px)}.family-canvas [data-badge]{position:absolute;top:18px;left:20px;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--mint);background:var(--panel);padding:8px 12px;border-radius:16px;pointer-events:none}.family-explanation{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.family-explanation h2{font:500 25px Georgia,serif}.family-explanation h3{font-size:15px}.family-explanation p{font-size:13px}.family-caution{padding:12px;border-left:3px solid var(--mint);background:var(--surface-soft)}
@media(max-width:1100px){.topbar{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.topbar nav{flex-wrap:wrap}.topbar .nav{padding:9px 12px}.motif-layout{grid-template-columns:minmax(230px,280px) minmax(0,1fr)}.motif-model-head{align-items:start;flex-wrap:wrap}}
@media(max-width:700px){.motif-lab,.family-view{padding:16px 12px}.motif-layout{grid-template-columns:1fr}.motif-input{padding:18px}.motif-input textarea{min-height:90px}.motif-input form{margin-bottom:16px}.motif-heading h1{font-size:34px}.motif-heading p{font-size:13px}.motif-model-head{padding:18px 16px 10px}.motif-model h2{font-size:22px}.motif-canvas{height:390px}.motif-fold{padding:16px}.motif-sequence{padding:0 16px 16px}.family-view>header{display:block}.family-toolbar{align-items:start}.family-toolbar label{width:100%}.family-toolbar select{width:100%}.family-explanation{grid-template-columns:1fr}.family-canvas{height:420px}.teaching-switch{margin:12px;padding:12px}.teaching-switch label{width:100%}.teaching-switch select{flex:1;max-width:none;min-width:0}.teaching-switch #primaryStructureLabel{display:none}.topbar nav{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:10px;justify-content:start}.topbar .nav{flex-shrink:0}.family-view>header .text-link{margin-bottom:12px}}