:root{--grid-margin:32px;--grid-gap:16px;--ui-text:#111;--ui-muted:#1111117a;--ui-line:#11111138;--type-title:20px;--type-body:13px;--type-control:13px;--type-meta:13px;--type-small:11px}*{box-sizing:border-box}html,body{width:100%;height:100%}body{color:var(--ui-text);background:radial-gradient(circle at 25% 30%,#ffd6a3 0%,#dde3df 35%,#a5b0b2 100%);margin:0;font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input{font:inherit}button{color:inherit}canvas{z-index:1;width:100%;height:100%;display:block;position:fixed;inset:0}.ui{z-index:10;gap:var(--grid-gap);padding:var(--grid-margin);pointer-events:none;grid-template-rows:auto 1fr auto;grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:fixed;inset:0}.ui button,.ui label,.ui input,.audio-track{pointer-events:auto}.ui-header{gap:var(--grid-gap);grid-area:1/1/auto/-1;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;display:grid}.project-block{grid-column:1/3}.project-title{font-size:var(--type-title);letter-spacing:-.035em;margin:0;font-weight:700;line-height:.95}.project-description{font-size:var(--type-body);letter-spacing:-.01em;margin-top:7px;line-height:1.2}.project-meta{font-size:var(--type-meta);letter-spacing:.02em;grid-column:4;place-self:start end;line-height:1}.interaction-area{flex-direction:column;grid-area:3/1/auto/4;align-self:end;gap:20px;display:flex}.mode-switch{align-items:center;gap:8px;display:flex}.mode{border:1px solid var(--ui-line);font-size:var(--type-control);letter-spacing:.025em;text-transform:uppercase;cursor:pointer;opacity:.4;background:0 0;padding:9px 14px 8px;font-weight:700;line-height:1;transition:opacity .16s,background .16s,color .16s,border-color .16s}.mode:hover{opacity:.75}.mode.active{opacity:1;color:#fff;background:var(--ui-text);border-color:var(--ui-text)}.control-area{width:100%}.controls{align-items:center;gap:18px;min-height:28px;display:flex}.hidden{display:none}.action-button,.audio-play{font-size:var(--type-control);letter-spacing:.02em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;padding:8px 0 6px;font-weight:700;line-height:1;position:relative}.action-button:after,.audio-play:after{content:"";transform-origin:0;background:currentColor;width:100%;height:1px;transition:transform .18s;position:absolute;bottom:0;left:0}.action-button:hover:after,.audio-play:hover:after{transform:scaleX(.3)}.action-button:active,.audio-play:active{opacity:.5}.status{font-size:var(--type-small);letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted);align-items:center;gap:7px;line-height:1;display:flex}.status-dot{background:currentColor;border-radius:50%;flex:none;width:5px;height:5px}.status.is-active{color:var(--ui-text)}.status.is-error{color:#c7342f}.upload-button input,#audioPlayer{display:none}.audio-file-name{white-space:nowrap;text-overflow:ellipsis;max-width:160px;font-size:var(--type-small);color:var(--ui-muted);line-height:1;overflow:hidden}.audio-ui{align-items:center;gap:13px;display:flex}.audio-play{text-align:left;min-width:42px}.audio-play:disabled{opacity:.25;cursor:default}.audio-play:disabled:after{transform:none}.audio-track{cursor:pointer;width:clamp(120px,14vw,220px);height:15px;position:relative}.audio-track:before{content:"";background:var(--ui-line);width:100%;height:1px;position:absolute;top:7px;left:0}.audio-progress{background:var(--ui-text);pointer-events:none;width:0%;height:1px;position:absolute;top:7px;left:0}.audio-time{min-width:90px;font-size:var(--type-small);font-variant-numeric:tabular-nums;color:var(--ui-muted);line-height:1}.intro-message{z-index:8;text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:min(320px,100vw - 48px);transition:opacity .3s,transform .3s;display:flex;position:fixed;top:44%;left:50%;transform:translate(-50%,-50%)}.intro-label{font-size:var(--type-small);letter-spacing:.08em;text-transform:uppercase;opacity:.45;font-weight:700}.intro-text{letter-spacing:-.025em;max-width:260px;font-size:18px;font-weight:700;line-height:1.08}.intro-message.is-hidden{opacity:0;transform:translate(-50%,-46%)}.ui-footer{right:var(--grid-margin);bottom:var(--grid-margin);z-index:10;pointer-events:none;position:fixed}.page-indicator{letter-spacing:-.055em;font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;line-height:.8}@media (width<=900px){:root{--grid-margin:24px;--grid-gap:12px;--type-title:19px;--type-body:12px;--type-control:12px;--type-meta:12px;--type-small:10px}.ui,.ui-header{grid-template-columns:repeat(2,minmax(0,1fr))}.project-block{grid-column:1}.project-meta{grid-column:2}.interaction-area{grid-column:1/-1}.audio-track{width:150px}.intro-text{font-size:17px}}@media (width<=600px){:root{--grid-margin:18px;--type-title:18px;--type-body:12px;--type-control:12px;--type-meta:11px;--type-small:10px}.ui{padding:var(--grid-margin);display:block}.ui-header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.project-block{max-width:72%}.project-description{max-width:210px}.interaction-area{left:var(--grid-margin);right:var(--grid-margin);z-index:20;flex-direction:column;gap:16px;display:flex;position:fixed;bottom:54px}.mode-switch{flex-wrap:wrap;gap:6px}.mode{padding:9px 11px 8px}.controls{flex-wrap:wrap;gap:12px 16px}#audioControls{align-items:flex-start}.audio-file-name{max-width:135px}.audio-ui{grid-template-columns:auto minmax(80px,1fr) auto;gap:10px;width:100%;display:grid}.audio-track{width:100%}.audio-time{min-width:auto}.intro-message{width:calc(100% - 48px);top:39%}.intro-text{max-width:220px;font-size:16px}.ui-footer{right:var(--grid-margin);bottom:18px}.page-indicator{font-size:17px}}@media (width<=390px){.project-block{max-width:76%}.mode{padding:8px 9px 7px}.interaction-area{gap:14px}.controls{gap:10px 12px}.audio-ui{grid-template-columns:auto 1fr;row-gap:12px}.audio-time{grid-column:1/-1}}