*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#263f3b;background:#f6f5ef;--green:#235b45}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #497dca;outline-offset:4px}header{max-width:1120px;margin:auto;padding:20px 32px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:17px;font-weight:600}.logo{display:grid;place-content:center;width:34px;height:34px;border-radius:10px;background:var(--green);color:white;font-size:25px;position:relative}.logo span{position:absolute;right:3px;bottom:0;color:#e9bd70}nav,.toolbar{display:flex;gap:10px}.icon{display:inline-grid;place-items:center;width:48px;height:48px;border:1px solid #dce3d5;border-radius:12px;background:#f4f6f0;color:#4f6656;font-size:27px;line-height:1;flex-shrink:0}.quiet{background:none;border:0}.primary{background:var(--green);color:white;border:0;width:70px;height:54px;font-size:36px}.primary:hover{background:#317457}main{max-width:1080px;margin:0 auto;padding:8px 24px 32px;display:flex;flex-direction:column;gap:20px}.workspace,.bank{background:white;border:1px solid #e0e5da;border-radius:16px;padding:18px 24px}.toolbar{justify-content:flex-end;margin-bottom:10px}.sentence{display:flex;align-content:center;align-items:center;flex-wrap:wrap;gap:12px;min-height:220px;padding:24px;border:2px dashed #d7dfce;border-radius:12px;background:#fafbf7}.placeholder{margin:auto;color:#b1bea5;font-size:34px;pointer-events:none}.sentence.dragover{background:#edf4e5;border-color:#6b946a}.tile{border:1px solid transparent;border-bottom-width:3px;border-radius:8px;padding:13px 20px;font-size:23px;color:#233e3f;min-height:54px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.tile:active{cursor:grabbing}.tile.pronoun,.demo-tile{background:#dfedf7;border-color:#c4dbe9}.tile.verb,.demo-tile.verb{background:#e3efdb;border-color:#c5d9b5}.tile.noun,.demo-tile.noun{background:#fae6cf;border-color:#edceb0}.tile.other{background:#ece8f5;border-color:#d6cee8}.tile:hover{filter:brightness(.98)}.tile.selected{outline:2px solid var(--green);outline-offset:3px}.sentence .tile{font-size:27px;padding:16px 24px}.words{display:flex;flex-wrap:wrap;gap:12px;padding:10px 0}.sentence-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;min-height:64px}.sentence-footer>.primary{margin-left:auto}.feedback{font-size:58px;font-weight:700;line-height:1;color:#3d8b45;padding:0 10px}.feedback.review{font-size:36px;color:#9a7953}.feedback[hidden]{display:none}.edit-tools{display:flex;gap:10px;justify-content:center;margin-top:15px}.edit-tools[hidden]{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tile.needs-attention{animation:tile-pulse .55s ease-in-out 2}.tile.attention-static{box-shadow:0 0 0 4px #bb703d}.sentence.needs-attention{animation:area-pulse .55s ease-in-out 2}@keyframes tile-pulse{50%{box-shadow:0 0 0 5px #bb703d;filter:brightness(.88);transform:translateY(-3px)}}@keyframes area-pulse{50%{border-color:#bb703d;background:#faf1e5}}.drag-ghost{position:fixed;pointer-events:none;z-index:10000;opacity:.92;box-shadow:0 6px 20px #253b3426;transform:translate(-50%,-50%)}dialog{border:1px solid #d9e0d0;border-radius:18px;max-width:490px;width:calc(100% - 32px);padding:28px;color:#354a3d}dialog::backdrop{background:#243e3678}dialog p{font-size:15px;line-height:1.6;color:#56644f}dialog h2{font-size:22px;margin-top:12px}dialog .close{float:right;border:0;background:none;padding:8px;min-height:40px}dialog summary{cursor:pointer;margin-top:20px;font-size:14px}.upload{display:block;background:#eef3e7;padding:15px;border-radius:9px;font-size:14px}.upload input{display:block;margin-top:14px;width:100%;font-size:13px}.secondary{background:#f2f4ed;border:1px solid #dbe1d2;border-radius:8px;padding:12px;color:#42604a}code{font-size:12px;background:#f1f3ec;padding:2px 4px}#welcome{max-width:460px;padding:32px}#welcome .demo{display:flex;justify-content:center;gap:8px;margin:4px 0 16px}.demo-tile{padding:12px 14px;border-radius:7px;font-size:20px}.gesture{display:flex;justify-content:center;align-items:center;gap:20px;font-size:32px;color:#889a76;margin-bottom:20px}.mini-arrow{background:var(--green);color:white;border-radius:8px;padding:0 10px}.instruction{padding:15px 0;border-top:1px solid #e5e8de}.instruction h2{font-size:12px;letter-spacing:.6px;margin:0;color:#7a8870}.instruction p{margin:8px 0 0;font-size:17px;line-height:1.6}#start{display:grid;margin:15px 0 0 auto}
@media(max-width:650px){header{padding:12px 17px}.brand{font-size:15px}nav{gap:2px}.icon{width:44px;height:44px;font-size:26px}.primary{width:64px;height:50px;font-size:34px}main{padding:0 12px 20px;gap:14px}.workspace,.bank{border-radius:13px;padding:12px 14px}.toolbar{margin-bottom:6px;gap:4px}.sentence{min-height:190px;padding:15px;gap:9px}.sentence .tile{font-size:23px;padding:13px 17px}.tile{font-size:20px;min-height:49px;padding:11px 15px}.words{gap:9px;padding:3px 0}.sentence-footer{margin-top:10px;min-height:56px}.feedback{font-size:48px}.bank{padding-top:15px;padding-bottom:15px}.edit-tools{gap:8px}#welcome{padding:25px}.instruction p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.tile.needs-attention,.sentence.needs-attention{animation:none;box-shadow:0 0 0 4px #bb703d}}

.bank.dragover{background:#edf4e5;border-color:#6b946a;box-shadow:inset 0 0 0 2px #6b946a}

.bank-actions{display:flex;justify-content:flex-end;margin:-5px -5px 6px}.bank-actions .icon{font-size:32px;color:#235b45}