:root{--ink:#1e1e1e;--paper:#fefefe;--pink:#f386a1;--pink-deep:#d45bb6;--dash:#88888859;--dim:#fefefe8c;--display:"Archivo", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--pixel:"Silkscreen", var(--mono)}*{box-sizing:border-box}html,body{background-color:#f386a1;margin:0}body{min-height:100vh;color:var(--ink);font-family:var(--display);-webkit-font-smoothing:antialiased;background:radial-gradient(60% 50% at 15% 20%, #ffffff59, transparent 60%), radial-gradient(50% 45% at 85% 80%, #d45bb68c, transparent 60%), linear-gradient(160deg, #f9a6b9, var(--pink) 55%, #ee7a9a)}main{flex-direction:column;gap:20px;max-width:1240px;margin:0 auto;padding:40px 24px;display:flex}.label{font-family:var(--pixel);text-transform:uppercase;font-size:10px}.task{gap:8px;display:grid}.task .label{grid-column:1/-1}.task input,.task textarea{font-family:var(--mono);color:var(--ink);resize:vertical;border:0;border-bottom:1.2px solid var(--ink);background:#fefefe80;padding:10px 12px;font-size:14px;font-weight:300}.task input:focus-visible,.task textarea:focus-visible{background:var(--paper);outline:0}.task :disabled{opacity:.6}.window{background:var(--ink);color:var(--paper);grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);display:grid;box-shadow:0 30px 80px -20px #1e1e1e99}.browser{border-right:1px dashed var(--dash)}.bar a.brand{color:var(--pink);margin-right:12px;text-decoration:none}.bar a.brand:hover{text-decoration:underline}.bar{border-bottom:1px dashed var(--dash);font-family:var(--mono);white-space:nowrap;text-overflow:ellipsis;color:var(--dim);padding:10px 14px;font-size:12px;font-weight:300;overflow:hidden}.viewport{aspect-ratio:1120/780;background:#2a2a2a;position:relative}.viewport iframe{border:0;width:100%;height:100%;display:block}.viewport img{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}[hidden]{display:none!important}#empty{font-family:var(--mono);color:var(--dim);place-items:center;margin:0;font-size:13px;display:grid;position:absolute;inset:0}#targets{pointer-events:none;position:absolute;inset:0}.t{border:1px solid #fefefe80;position:absolute}.t span{font-family:var(--pixel);background:var(--paper);color:var(--ink);padding:2px 3px;font-size:8px;line-height:1;position:absolute;top:-1px;left:-1px}.t.on{border:2px solid var(--pink);background:#f386a133}.t.on span{background:var(--pink)}aside{flex-direction:column;gap:12px;height:0;min-height:100%;padding:18px;display:flex}.controls{align-items:baseline;gap:18px;display:flex}#clear{appearance:none;cursor:pointer;font-family:var(--mono);color:var(--dim);text-underline-offset:4px;background:0 0;border:0;padding:0;font-size:13px;font-weight:300;text-decoration:underline}#clear:hover{color:var(--paper)}#timer{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--paper);margin-left:auto;font-size:34px;font-weight:500;line-height:1}#timer.done{color:var(--dim)}#start{appearance:none;cursor:pointer;font-family:var(--display);letter-spacing:-.02em;color:var(--pink);text-underline-offset:6px;background:0 0;border:0;padding:0;font-size:34px;font-weight:500;line-height:1;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;text-decoration-thickness:3px}#start:hover{-webkit-text-decoration-color:var(--pink-deep);text-decoration-color:var(--pink-deep);color:var(--pink-deep)}#status{font-family:var(--mono);color:var(--dim);margin:0;font-size:12px;font-weight:300}aside .label{color:var(--dim)}#op{color:var(--pink);margin-left:6px}#actions{min-height:0;font-family:var(--mono);flex:1;font-size:12px;font-weight:300;overflow:auto}.a{border-top:1px dashed var(--dash);grid-template-columns:28px 1fr 42px;gap:8px;padding:6px 0;display:grid}.a .i{color:var(--dim)}.a .p{text-align:right;font-variant-numeric:tabular-nums}.a .l{overflow-wrap:anywhere;min-width:0}.a small{color:var(--dim);font-size:11px;display:block}.a i{background:linear-gradient(90deg, #fefefe73 var(--p), transparent var(--p));height:4px;margin-top:5px;display:block}.a.on .i,.a.on .p{color:var(--pink)}.a.on i{background:linear-gradient(90deg, var(--pink) var(--p), transparent var(--p))}.replay{border-top:1px dashed var(--dash);font-family:var(--mono);justify-content:space-between;align-items:center;gap:12px;padding-top:10px;font-size:13px;display:flex}.replay button{appearance:none;border:1px solid var(--dash);color:var(--paper);font:500 18px var(--mono);cursor:pointer;background:0 0;width:44px;height:32px}.replay button:hover:not(:disabled){border-color:var(--pink);color:var(--pink)}.replay button:disabled{opacity:.3;cursor:default}.trace{font-family:var(--mono);padding:16px 18px;font-size:12px;font-weight:300;display:block}.trace .label{color:var(--dim);margin-bottom:8px}.r{border-top:1px dashed var(--dash);grid-template-columns:28px 1fr auto;gap:12px;padding:6px 0;display:grid}.r .n{color:var(--pink)}.r b{font-weight:500}.m{color:var(--dim);white-space:nowrap;margin:0}@media (max-width:900px){.window{grid-template-columns:minmax(0,1fr)}.browser{border-right:0;min-width:0}aside{height:auto;min-height:0}#actions{max-height:60vh}}@media (max-width:640px){main{gap:14px;padding:16px 12px 32px}.task input,.task textarea{font-size:16px}.task textarea{min-height:7.5em}.window{box-shadow:0 16px 40px -16px #1e1e1e99}aside{display:contents}aside>*{margin:0 14px}.controls{order:-2;gap:14px;margin-top:14px}#status{order:-1;margin:6px 14px 12px}.browser{border-top:1px dashed var(--dash);border-bottom:1px dashed var(--dash)}aside>.label{margin-top:14px;margin-bottom:8px}#actions{max-height:38vh;margin-bottom:12px}.replay{margin-bottom:14px}.replay button{width:56px;height:40px}#start,#timer{font-size:28px}.bar{padding:8px 12px;font-size:11px}.t span{display:none}.t.on span{display:block}.trace{padding:14px}.r{grid-template-columns:22px 1fr;row-gap:2px}.r .m{color:var(--dim);grid-column:2}}