:root{color-scheme:light;--ink:#161616;--muted:#656565;--line:#e8e8e8}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:Arial,Helvetica,sans-serif}main{max-width:1600px;margin:auto;padding:32px 4vw 24px}header{display:flex;align-items:baseline;justify-content:space-between;gap:18px}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:24px;margin:0}header span{font-size:12px;letter-spacing:.16em;color:var(--muted)}#logo-stage{width:100%;aspect-ratio:1536/865;max-height:calc(100svh - 190px);min-height:220px;display:flex;align-items:center;justify-content:center}canvas{display:block;max-width:100%;height:auto!important}.controls{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:20px}button,select{font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid #d5d5d5;border-radius:5px;padding:10px 14px;min-height:42px}button{cursor:pointer}button:hover,select:hover{background:#f5f5f5}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:4px}#play{min-width:76px;background:var(--ink);color:#fff;border-color:var(--ink)}.timeline{display:flex;align-items:center;gap:14px;flex:1;min-width:170px}.timeline input{width:100%;accent-color:#202020;min-width:70px}.timeline output{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}.duration{display:flex;align-items:center;gap:9px;font-size:14px;white-space:nowrap}.note{font-size:13px;color:var(--muted);text-align:center;margin:20px 0 0}.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}#error{text-align:center;color:#a11}@media(max-width:780px){main{padding:24px 5vw}header{gap:12px}h1{font-size:21px}header span{font-size:10px}#logo-stage{min-height:0;max-height:none;margin:48px 0 32px}.controls{flex-wrap:wrap;gap:10px}.timeline{order:3;flex-basis:100%;padding-top:5px}.duration{margin-left:auto;font-size:13px}button,select{padding:9px 10px;font-size:13px}.note{font-size:12px;margin-top:22px}}@media(max-width:430px){.duration{order:4;margin:4px 0 0}.note{text-align:left}}

.note a{color:inherit;text-underline-offset:3px}.note a:hover{color:#111}
.controls{flex-wrap:wrap}
.attention-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.attention-radius{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}.attention-radius input{width:120px;accent-color:#161616}.attention-radius output{min-width:4ch;font-variant-numeric:tabular-nums}
.spacing{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}.spacing input{accent-color:#161616;width:16px;height:16px}@media(max-width:1280px){.controls{flex-wrap:wrap}.timeline{order:4;flex-basis:100%}.duration{margin-left:auto}}