.play{border:2px solid #d9e6f2;border-radius:16px;padding:16px;margin:14px 0;background:#fbfdff;touch-action:manipulation}
.play h3{margin:0 0 6px;font-size:1.15rem}.play .lead{margin:0 0 10px;color:#40546a}
.play button,.play .chip{font:inherit;min-height:44px;min-width:44px;padding:8px 14px;border-radius:12px;border:2px solid #b8cde0;background:#fff;cursor:pointer;margin:3px}
.play button.primary{background:#0f7b8a;color:#fff;border-color:#0f7b8a}
.play .chip{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.3rem;user-select:none;-webkit-user-select:none;touch-action:none}
.play .chip.sel{outline:3px solid #f2a33a}.play .slot{display:inline-flex;min-width:56px;min-height:56px;border:2px dashed #8aa;border-radius:12px;margin:3px;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;vertical-align:middle}
.play .zone{min-height:90px;border:2px dashed #8aa;border-radius:14px;padding:8px;margin:8px 0;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.play .msg{font-weight:700;min-height:1.4em;margin:8px 0}.play .ok{color:#127a3a}.play .no{color:#b23a1d}
.play .done-badge{display:inline-block;background:#127a3a;color:#fff;border-radius:999px;padding:2px 10px;font-size:.85rem;margin-left:8px}
.play label.rng{display:block;margin:6px 0}.play input[type=range]{width:100%;max-width:420px;height:32px}
.play canvas{width:100%;max-width:640px;height:auto;background:#fff;border:1px solid #d5dee8;border-radius:10px;display:block;touch-action:none}
.play table{border-collapse:collapse;margin:8px 0;font-size:.95rem}.play td,.play th{border:1px solid #cdd8e3;padding:4px 8px;text-align:center}
.play textarea,.play input[type=text],.play input[type=number],.play select{font:inherit;padding:8px;border-radius:10px;border:2px solid #b8cde0;max-width:100%}
.play textarea{width:100%;min-height:70px}.play .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.play .frac-bar{display:flex;height:56px;border:2px solid #345;border-radius:8px;overflow:hidden;max-width:520px;margin:6px 0}
.play .frac-bar div{flex:1;border-right:1px solid #345;cursor:pointer}.play .frac-bar div.on{background:#f2a33a}
.play .tl-item{display:block;width:100%;text-align:left}.play .doc{background:#fffaf0;border-left:4px solid #c9a227;padding:10px 14px;font-family:Georgia,serif;white-space:pre-wrap}
.play iframe{width:100%;aspect-ratio:4/3;border:1px solid #ccd;border-radius:10px}.play .attr{font-size:.85rem;color:#556}
@media print{.play button{display:none}}