:root { --ink:#18224e;--night:#141b42;--panel:#202957;--cream:#fff7df;--paper:#f2ebd7;--coral:#f06f64;--gold:#f3bd4d;--mint:#58c2a6;--sky:#65b9e7;font-family:ui-rounded,"Avenir Next",system-ui,sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { width:100%;height:100%;margin:0; }
body { min-width:1100px;min-height:720px;overflow:hidden;color:var(--ink);background:#d9d8d2; }
button { color:inherit;font:inherit; }
button:focus-visible { outline:4px solid rgba(101,185,231,.55);outline-offset:3px; }
.lesson { position:relative;width:min(1330px,calc(100vw - 36px));height:min(860px,calc(100vh - 30px));margin:15px auto;display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:minmax(0,1fr) 108px;gap:14px; }
.loom { min-width:0;padding:18px 22px 22px;display:grid;grid-template-rows:42px 76px minmax(0,1fr);border:9px solid #2b3466;border-radius:34px;background:linear-gradient(rgba(255,247,223,.82),rgba(255,247,223,.68)),url("./assets/scene-plate.webp") center/cover no-repeat;box-shadow:0 25px 55px rgba(21,28,64,.22),inset 0 0 0 4px #f7d98d;overflow:hidden; }
.loom-head { display:grid;grid-template-columns:1fr auto 1fr;align-items:start; }
.loom-head>div:first-child { display:flex;flex-direction:column; }
.loom-head span,.mission span,.controls>span,.rotate>span,.decision span,.finale span,.target-thread>span,.pulse-card>span { color:#5f647b;font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase; }
.loom-head strong { font-size:15px; }.loom-head>button { justify-self:end;min-height:42px;padding:0 14px;border:0;border-radius:13px;background:#ebe2c8;font-weight:900;cursor:pointer; }
.pips { display:flex;gap:7px;padding-top:9px; }.pips i { width:30px;height:7px;border-radius:99px;background:#d8cfb9; }.pips i.on { background:var(--gold); }.pips i.done { background:var(--mint); }
.mission { text-align:center; }.mission h1 { margin:4px 0 3px;font-size:29px;line-height:1.05;letter-spacing:-.035em; }.mission p { margin:0;color:#6c7184;font-size:13px;font-weight:680; }
.weave-shell { position:relative;min-height:0;padding:52px 20px 20px 116px;border:6px solid var(--night);border-radius:25px;background:linear-gradient(90deg,rgba(24,34,78,.045) 1px,transparent 1px),var(--paper);background-size:calc((100% - 136px)/16) 100%;box-shadow:inset 0 0 0 5px #d9be83;overflow:hidden; }
.pulse-ruler { position:absolute;left:136px;right:20px;top:15px;display:grid;grid-template-columns:repeat(16,1fr);height:30px; }
.pulse-ruler span { position:relative;display:grid;place-items:center;color:#685e56;font-size:12px;font-weight:900; }.pulse-ruler span.beat { color:var(--night);font-size:14px; }.pulse-ruler span.beat::after { content:"";position:absolute;top:31px;bottom:-410px;width:2px;background:rgba(24,34,78,.16); }
.layers { position:relative;display:grid;gap:12px;z-index:2; }.layer { position:relative;min-height:68px; }.layer-label { position:absolute;right:calc(100% + 14px);top:7px;width:96px;text-align:right; }.layer-label strong { display:block;font-size:14px; }.layer-label span { color:#62677d;font-size:12px;font-weight:900;text-transform:uppercase; }
.steps { display:grid;grid-template-columns:repeat(16,minmax(44px,1fr));gap:4px; }.step { position:relative;min-width:44px;height:54px;padding:0;border:2px solid #cbc2ad;border-radius:12px;background:#fffaf0;box-shadow:0 4px 0 #b9ad94;cursor:pointer; }.step::after { content:"";position:absolute;inset:50% auto auto 50%;width:10px;height:10px;border:3px solid #a99f90;border-radius:50%;transform:translate(-50%,-50%); }.step.hit::after { width:22px;height:22px;border:0;background:var(--layer);box-shadow:0 3px 0 color-mix(in srgb,var(--layer),#000 28%); }.step.accent::after { width:27px;height:27px;border:5px double #fff;background:var(--layer);box-shadow:0 0 0 3px var(--layer),0 4px 0 color-mix(in srgb,var(--layer),#000 30%); }.step.downbeat { border-color:#92804f; }.step.is-playing { transform:translateY(-4px);filter:drop-shadow(0 0 9px var(--layer)); }.step:disabled { opacity:.72;cursor:default; }.layer[data-layer="drum"] { --layer:var(--coral); }.layer[data-layer="clap"] { --layer:var(--gold); }.layer[data-layer="shaker"] { --layer:var(--mint); }.layer[data-layer="bass"] { --layer:var(--sky); }
.conjunction { position:absolute;z-index:4;left:105px;top:42px;bottom:22px;width:31px;display:flex;flex-direction:column;align-items:center;color:var(--night);pointer-events:none; }.conjunction::after { content:"";flex:1;width:4px;border-radius:99px;background:var(--gold); }.conjunction b { width:31px;height:31px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--night);font-size:20px; }.conjunction span { position:absolute;left:-56px;bottom:8px;width:105px;color:#5f5665;font-size:12px;font-weight:950;transform:rotate(-90deg); }
.target-thread { margin-top:13px;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center; }.target-thread>span { text-align:right; }.target-thread>div { display:grid;grid-template-columns:repeat(16,minmax(44px,1fr));gap:4px; }.target-thread i { height:15px;border-radius:99px;background:#d4cbb7; }.target-thread i.hit { background:var(--sky); }.target-thread i.accent { background:var(--night);box-shadow:inset 0 0 0 4px var(--sky); }
.controls { padding:22px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:15px;border-radius:30px;color:#fff;background:var(--night);box-shadow:0 22px 48px rgba(20,27,66,.28); }.controls>span { color:#a7aecf; }.transport { display:grid;gap:9px; }.transport button { min-height:52px;border:0;border-radius:16px;color:#fff;background:#303b75;font-weight:950;cursor:pointer; }.transport .play { color:var(--night);background:var(--gold);box-shadow:0 5px 0 #ad7623; }
.rotate { padding:14px;border-radius:18px;background:#263164; }.rotate>span { color:#b8bfdf; }.rotate>div { margin:8px 0;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:8px; }.rotate button { min-height:46px;border:0;border-radius:12px;background:#48558e;color:#fff;font-size:23px;font-weight:950;cursor:pointer; }.rotate strong { text-align:center;font-size:22px; }.rotate small { color:#cbd0e6;font-size:12px; }
.legend { align-self:start;padding:14px;border-radius:18px;background:#202959; }.legend strong { display:block;margin-bottom:10px;font-size:13px; }.legend div { display:flex;align-items:center;gap:9px;margin-top:8px;color:#c7cce2;font-size:12px;font-weight:800; }.legend i { width:18px;height:18px;border:3px solid #7780a8;border-radius:50%; }.legend i.hit { border:0;background:var(--mint); }.legend i.accent { border:5px double #fff;background:var(--coral);box-shadow:0 0 0 2px var(--coral); }
.pulse-card { padding:14px;border-radius:18px;background:#0d1438;text-align:center; }.pulse-card>span { color:#9099c6; }.pulse-card strong { display:block;color:var(--mint);font-size:30px;line-height:1; }.pulse-card small { color:#a7aecf;font-weight:800; }
.decision { grid-column:1/-1;display:grid;grid-template-columns:1fr 1.7fr;align-items:center;gap:25px;padding:18px 28px;border-radius:25px;background:var(--cream);box-shadow:0 12px 28px rgba(30,34,50,.14); }.decision>div:first-child { display:flex;flex-direction:column;gap:5px; }.decision strong { font-size:17px; }.actions { display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap; }.actions button,.finale button { min-height:50px;padding:10px 16px;border:0;border-radius:15px;background:#e4dfd0;font-weight:900;cursor:pointer; }.actions .primary,.finale button { color:#fff;background:#336aa8;box-shadow:0 5px 0 #21466f; }
.finale { position:absolute;z-index:30;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;border-radius:34px;color:#fff;background:rgba(20,27,66,.98);text-align:center; }.finale>span { color:#8be0c8; }.finale>strong { max-width:700px;margin:10px 0 18px;font-size:36px; }.cloth { width:440px;height:76px;margin-bottom:20px;border-radius:14px;background:repeating-linear-gradient(0deg,transparent 0 13px,rgba(255,255,255,.25) 13px 16px),repeating-linear-gradient(90deg,var(--coral) 0 20px,var(--gold) 20px 40px,var(--mint) 40px 60px,var(--sky) 60px 80px);box-shadow:0 8px 0 #0b102d; }
.sr-only { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0); }.is-pointed { animation:point .7s ease-out 2; }
@keyframes point { 50% { filter:drop-shadow(0 0 12px var(--gold)); } }
@media(max-width:1180px){.lesson{grid-template-columns:minmax(0,1fr) 258px}.loom{padding-inline:16px}.weave-shell{padding-left:104px}.pulse-ruler{left:124px}.step,.target-thread i{min-width:40px}.steps,.target-thread>div{grid-template-columns:repeat(16,minmax(40px,1fr))}.conjunction{left:93px}}
@media(max-width:1099px),(max-height:719px){body{min-width:0;overflow:auto}.lesson{width:min(100% - 24px,980px);height:auto;min-height:calc(100vh - 24px);margin:12px auto;grid-template-columns:1fr;grid-template-rows:minmax(680px,78vh) auto auto}.weave-shell{overflow-x:auto}.controls{grid-template-columns:1fr 1.5fr 1fr;grid-template-rows:auto auto}.decision{grid-column:1}.legend{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}