*{box-sizing:border-box}body{margin:0;background:#f5f4ec;color:#243b45;font-family:Arial,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation;border:2px solid #ccd9d5;background:white;color:#243b45;border-radius:12px;min-height:48px;padding:9px 15px;font-weight:700}button:focus-visible,[tabindex]:focus-visible{outline:4px solid #e5ac34}button:disabled{opacity:.4;cursor:default}header{padding:20px 3vw 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dce2d9}h1{font-size:clamp(23px,2.2vw,36px);margin:5px 0}header p{margin:0;font-size:16px;color:#536b73}.eyebrow{font-size:12px;letter-spacing:2px;color:#397465;font-weight:bold}main{padding:14px 3vw}.instructions{display:flex;gap:25px;align-items:center;margin-bottom:14px;font-size:16px}.instructions b{display:inline-grid;place-items:center;background:#dbece2;width:28px;height:28px;border-radius:50%;margin-right:5px}#progress{margin-left:auto;background:#285e50;color:white;padding:10px 23px;border-radius:25px;font-size:23px}#pictures,#bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.picture{border:2px solid #d6ddd2;background:#fff;border-radius:20px;padding:12px;min-width:0}.visual{display:flex;align-items:center;justify-content:space-around;gap:5px;background:#f3efdf;border-radius:12px;padding:8px}.art{width:55%;height:150px;overflow:hidden;border-radius:8px}.art svg{width:100%;height:100%}.clock{width:43%;max-width:145px}.clock text{font-family:Arial;fill:#263d46;font-size:13px}.slot{margin-top:10px;min-height:86px;border:2px dashed #c6d3ce;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#647b7b;text-align:center;font-size:17px}.slot .text-card{margin:-2px;width:calc(100% + 4px);text-align:left}.controls{display:flex;gap:8px;justify-content:center;margin-top:9px}.controls label{font-size:12px;text-align:center;flex:1}.stepper{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:4px}.stepper button{padding:0;min-width:44px;font-size:24px}.stepper output{min-width:24px;font-size:19px;font-weight:bold}.clock-status{min-height:19px;text-align:center;font-size:13px;margin-top:7px}.bank-title{font-weight:bold;margin:15px 0 9px;font-size:20px}.bank-title small{font-weight:normal;margin-left:10px;font-size:14px}.text-card{position:relative;border:3px solid #d8dfd8;border-radius:12px;background:#fffef8;padding:12px;touch-action:none;user-select:none;font-size:clamp(17px,1.35vw,23px);line-height:1.38;cursor:grab;white-space:pre-line}.text-card p{margin:0}.text-card .sound{float:right;margin:0 0 4px 6px;padding:5px;min-width:46px}.text-card.selected{border-color:#b47713;background:#fff4d6}.text-card.good{border-color:#25834e;background:#f1fbf3;cursor:default}.text-card.bad{border-color:#c54141;background:#fff3f1}.picture.bad-clock .clock{background:#ffeded;border-radius:50%;outline:3px solid #c54141}.picture.complete{border-color:#25834e}.drag-ghost{position:fixed;pointer-events:none;z-index:100;opacity:.88;max-width:330px;box-shadow:0 10px 30px #0003}.drag-target{outline:4px solid #e6b74c}footer{display:flex;align-items:center;gap:12px;margin-top:17px;flex-wrap:wrap}.primary{background:#285e50;color:white;border-color:#285e50}#message{flex:1;min-width:240px;font-weight:bold;font-size:18px}.success{color:#247343}@media(min-width:1100px){.slot .text-card{font-size:clamp(16px,1.2vw,21px)}}@media(max-width:1000px){#pictures,#bank{grid-template-columns:repeat(2,minmax(0,1fr))}.instructions{flex-wrap:wrap;gap:10px}.art{height:160px}}@media(max-width:560px){#pictures,#bank{grid-template-columns:1fr}header{align-items:flex-start}#fullscreen{font-size:0}#fullscreen:first-letter{font-size:24px}.instructions{font-size:14px}.text-card{font-size:19px}}
