:root{--ink: #4a4560;--soft: #8a84a3;--card: rgba(255, 255, 255, .93);--accent: #ff8fa3;--sea: #5b9fd8;--ok: #7cc79a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:Fredoka,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,#cfe9f7,#f6e7f1 70%,#fbefe0)}#view{display:block;width:100vw;height:100vh}.panel{position:absolute;background:var(--card);border-radius:18px;box-shadow:0 6px 24px #5a50822e;padding:12px 14px}.hidden{display:none!important}#top{top:14px;left:14px;width:270px}.title{font-size:22px;font-weight:600}.title span{font-size:12px;font-weight:400;color:var(--soft);margin-left:4px}.budget{margin-top:8px}.bar,.time{height:10px;border-radius:6px;background:#ece7f3;overflow:hidden}#budget-fill{height:100%;background:linear-gradient(90deg,#ffc48f,var(--accent));transition:width .15s}#budget-fill.over{background:#e05d5d}#budget-text{font-size:13px;margin-top:4px}#status{font-size:13px;margin-top:6px;color:var(--soft);min-height:18px}#tools{left:14px;top:168px;display:flex;flex-direction:column;gap:4px;width:226px}#tools button{padding:4px 10px;font-size:13px;text-align:left;display:flex;justify-content:space-between;align-items:center}#tools button small{color:var(--soft);font-size:11px}#tools .site-title{font-weight:600;font-size:14px;margin:0 2px 2px}#tools .site-title small{display:block;font-weight:400;font-size:12px;color:var(--soft);margin-top:2px}#tools button em{display:block;font-style:normal;font-size:11px;color:var(--soft)}#tools button:disabled{opacity:.5;cursor:default}button{font:inherit;font-size:14px;color:var(--ink);border:none;border-radius:12px;padding:7px 11px;background:#f1edf7;cursor:pointer;transition:background .12s,transform .08s}button:hover{background:#e6e0f2}button:active{transform:scale(.97)}button.on{background:#ffd9e0;box-shadow:inset 0 0 0 2px var(--accent)}button.big{background:var(--sea);color:#fff;font-weight:600;font-size:16px;padding:9px 16px}button.big:hover{background:#4a8fca}button.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px #ddd6ea}button:disabled{opacity:.4;cursor:default}.row{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}#wave{right:14px;bottom:14px;width:300px;font-size:14px}#wave input{width:100%;accent-color:var(--sea)}#play{left:50%;bottom:14px;transform:translate(-50%);width:min(560px,calc(100vw - 28px))}#time-fill{height:100%;width:0;background:linear-gradient(90deg,#8fdde0,var(--sea))}#result{left:50%;top:60px;transform:translate(-50%);text-align:center;min-width:300px}#result h2{margin:0 0 4px;font-size:22px}#result p{margin:4px 0}#result .row{justify-content:center}button.link{background:none;padding:2px 0;font-size:12px;color:var(--soft);text-decoration:underline;margin-top:4px}#alert{font-size:14px}#record{font-size:12px;margin-top:4px;color:var(--soft)}#help{position:absolute;right:16px;top:74px;font-size:12px;color:var(--soft);background:#fff9;padding:5px 10px;border-radius:10px}#perf{position:absolute;right:16px;top:42px;font-size:11px;color:var(--soft)}@media(max-width:700px){#tools{top:auto;bottom:150px;transform:none;width:160px}#wave{width:calc(100vw - 28px)}#help{display:none}}#perf-panel{position:absolute;right:14px;top:104px;white-space:pre;font:12px/1.45 ui-monospace,Consolas,monospace;color:#2e2a40;background:#fffffff2;border-radius:10px;padding:8px 10px;box-shadow:0 4px 16px #5a508233;pointer-events:none;z-index:10}#perf-panel pre{margin:0;font:inherit;white-space:pre}.perf-buttons{display:flex;gap:6px;margin-top:6px}.perf-buttons button{pointer-events:auto;font-size:12px;padding:4px 8px}.perf-status{margin-top:4px;font-size:12px}.row.small{margin-top:2px;gap:12px}#log{top:14px;left:50%;transform:translate(-50%);width:min(460px,calc(100vw - 28px));max-height:46vh;overflow-y:auto;font-size:13px}#log h3{margin:0 0 6px;font-size:15px}#log p{margin:3px 0}#left{position:absolute;left:14px;top:14px;width:270px;max-height:calc(100vh - 28px);display:flex;flex-direction:column;gap:10px;pointer-events:none}#left .panel{position:static;transform:none;width:auto;pointer-events:auto}#left #tools{width:226px;overflow-y:auto}#banner{position:absolute;left:50%;top:22%;transform:translate(-50%,-10px);padding:10px 18px;border-radius:14px;background:#2e2a40d1;color:#fff;font-size:18px;font-weight:500;opacity:0;transition:opacity .5s,transform .5s;pointer-events:none;text-align:center;max-width:calc(100vw - 40px)}#banner.on{opacity:1;transform:translate(-50%)}