:root{color-scheme:light;--sea:#167bb6;--ink:#17466a;--sun:#ffd24b;--coral:#e8585c;--cloud:#eef7fc;--line:#cde2ec;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;color:var(--ink);background:var(--cloud);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}.masthead{max-width:1240px;margin:auto;min-height:105px;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:13px;align-items:center;font-size:30px;font-weight:900;letter-spacing:1px;line-height:1.05}.brand small{display:block;font-size:12px;letter-spacing:2px;font-weight:600;margin-top:9px}.waterball{width:43px;height:48px;background:#47bdea;border:3px solid #0b7cb9;border-radius:50% 50% 45% 45%;box-shadow:inset -6px -7px 0 #159bcf;position:relative}.waterball:before{content:"";position:absolute;width:11px;height:16px;background:#fff9;left:8px;top:5px;border-radius:50%;transform:rotate(35deg)}.waterball:after{content:"";position:absolute;bottom:-8px;left:13px;border-bottom:8px solid #0b7cb9;border-left:5px solid transparent;border-right:5px solid transparent}nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:700}.development{color:#756124;background:#fff1bf;padding:8px 13px;border-radius:6px}main{max-width:1240px;margin:auto;padding:0 32px}.welcome{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,1fr);background:white;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 16px 40px #19456b0a}.stage{min-height:566px;position:relative;background:#3e281a}.stage>img{width:100%;height:100%;object-fit:cover;display:block;position:absolute}.stage-caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,#36200de8);padding:90px 38px 29px;color:white;pointer-events:none}.stage-caption h1{font-size:31px;letter-spacing:1px;margin:0 0 11px;line-height:1.35;text-shadow:0 2px 6px #0005}.stage-caption p{font-size:15px;margin:0;color:#fff2d4}.account{padding:31px 32px 23px;display:flex;flex-direction:column}.account-heading{display:flex;align-items:center;gap:10px}.little-wave{color:#27aad7;font-size:33px;line-height:1}.account h2{margin:0;font-size:24px;line-height:1.5;font-weight:800}.account-intro{font-size:13px;line-height:1.85;color:#688393;margin:11px 0 21px}.tabs{display:flex;background:#edf5fa;padding:4px;border-radius:9px;margin-bottom:21px}.tabs button{border:0;background:transparent;color:#67879a;flex:1;padding:10px 4px;font-size:14px;font-weight:700;border-radius:6px}.tabs button[aria-selected=true]{background:white;color:var(--sea);box-shadow:0 2px 5px #1645660d}label{display:block;font-size:13px;font-weight:700;margin:0 0 17px}input{display:block;width:100%;margin-top:8px;background:#fbfdff;border:1px solid var(--line);border-radius:7px;min-height:45px;padding:10px 12px;color:var(--ink);font-weight:400}input:focus{border-color:var(--sea)}input::placeholder{color:#95a9b8}.primary{display:block;width:100%;text-align:center;min-height:47px;padding:12px 16px;background:var(--sea);border:0;border-bottom:3px solid #096093;border-radius:8px;color:white;font-weight:800;font-size:15px}.primary:hover{background:#0c70a8}.quiet{border:0;background:none;color:#6d8799;padding:15px;font-size:13px;width:100%}.form-message{font-size:13px;line-height:1.8;color:#b73939;padding:8px 12px;background:#fff1ee;border-left:3px solid var(--coral)}.account-foot{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:7px;color:#7c94a2;font-size:12px}.service-dot{width:7px;height:7px;border-radius:100%;background:#b5c8d1}.service-dot.ready{background:#48aa89}.service-dot.failed{background:var(--coral)}.player-name{display:flex;align-items:center;gap:9px;margin-top:10px}.player-name h3{margin:0;font-size:24px}.player-id{font-size:12px;color:#7c94a2}.player-stats{display:flex;gap:20px;margin:27px 0}.player-stats dt{font-size:11px;color:#77909f;margin-bottom:8px}.player-stats dd{margin:0;font-size:23px;font-weight:800}.game-status{font-size:13px;line-height:1.9;background:#f0f7fb;padding:17px;border-radius:7px;margin:0 0 24px}.making{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:37px 0 28px}.making h2{font-size:20px;margin:0 0 12px;font-weight:800}.making p{font-size:13px;color:#6e8899;max-width:680px;line-height:1.9;margin:0}.preview-link{white-space:nowrap;padding:13px 19px;border:1px solid #b9d5e4;border-radius:8px;background:#fff8;font-weight:700;font-size:13px}.preview-link span{margin-left:15px;font-size:18px}footer{max-width:1176px;margin:0 auto;padding:21px 0 25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#7a96a7;font-size:11px}.lab-main{max-width:1400px}.lab-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:12px 0 25px}.lab-title h1{font-size:29px;margin:0 0 10px}.lab-title p{font-size:13px;color:#6e8899;margin:0;line-height:1.8}.lab-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px}.catalog-nav{background:white;border:1px solid var(--line);border-radius:10px;padding:16px;height:calc(100vh - 210px);position:sticky;top:16px;overflow:auto}.catalog-nav input{min-height:38px;font-size:12px;margin:0 0 12px}.catalog-nav h3{font-size:12px;color:#8ca4b3;margin:19px 6px 8px}.folder-button{display:flex;justify-content:space-between;gap:5px;width:100%;border:0;background:none;padding:7px 6px;text-align:left;color:#56768c;border-radius:5px;font-size:12px}.folder-button small{color:#9bb2bf}.folder-button.selected{background:#e3f3fc;color:#167bb6;font-weight:800}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.catalog-toolbar input{margin:0;max-width:340px}.catalog-toolbar h2{font-size:18px;margin:0}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}.asset-button{border:1px solid var(--line);border-radius:8px;background:white;min-width:0;overflow:hidden;text-align:left;color:var(--ink);padding:0}.asset-button:hover{border-color:var(--sea);box-shadow:0 4px 14px #167bb618}.asset-button .thumbnail{height:122px;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#f6f8fa 0% 25%,white 0% 50%) 50%/16px 16px}.asset-button img{max-width:100%;max-height:120px;object-fit:contain;display:block}.asset-label{padding:10px;font-size:11px;overflow-wrap:anywhere;line-height:1.6}.asset-label small{display:block;color:#91a5b1}.pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin:25px 0 45px}.pagination button{background:white;border:1px solid var(--line);padding:8px 15px;border-radius:6px;color:var(--ink)}.pagination span{font-size:12px;color:#77909f}dialog{border:1px solid var(--line);border-radius:13px;max-width:min(900px,96vw);width:900px;padding:25px;color:var(--ink)}dialog::backdrop{background:#12385488;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-heading h2{font-size:16px;overflow-wrap:anywhere}.dialog-heading button{border:0;background:#eff6fa;border-radius:50%;width:32px;height:32px;color:var(--ink);font-size:19px}.preview-area{min-height:240px;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#edf1f4 0% 25%,white 0% 50%) 50%/20px 20px;overflow:auto;border-radius:7px;padding:20px}.preview-area img{max-width:100%;max-height:400px;object-fit:contain}.preview-area canvas{max-width:100%;image-rendering:pixelated}.preview-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:17px;font-size:13px}.preview-controls input{width:200px;margin:0;min-height:0;padding:0}.preview-controls button,.preview-controls a{padding:8px 12px;border:1px solid var(--line);border-radius:5px;background:white;color:var(--ink);font-size:12px}.audio-icon{font-size:35px;color:var(--sea)}.empty-note{color:#7c94a2;padding:40px 0;font-size:13px}
@media(max-width:950px){.masthead,main{padding-left:22px;padding-right:22px}.welcome{grid-template-columns:1.25fr 1fr}.stage{min-height:550px}.stage-caption{padding-left:24px;padding-right:24px}.stage-caption h1{font-size:24px}.account{padding:26px 24px}.making{gap:25px}.lab-layout{grid-template-columns:180px minmax(0,1fr)}footer{margin-left:22px;margin-right:22px}}
@media(max-width:680px){.masthead{min-height:90px;padding:19px}.brand{font-size:25px}nav{gap:11px;font-size:12px}.development{padding:7px 8px}.welcome{grid-template-columns:1fr;border-radius:12px}.stage{min-height:320px}.stage>img{object-position:50% 44%}.stage-caption{padding:55px 23px 22px}.stage-caption h1{font-size:24px}.stage-caption p{font-size:12px}.account{padding:26px 25px}.account-intro{margin-bottom:18px}.account-foot{padding-top:20px}.making{flex-direction:column;align-items:start;padding:29px 0}.making h2{font-size:18px}.preview-link{align-self:stretch;text-align:center}.lab-title{align-items:start;flex-direction:column}.lab-layout{grid-template-columns:1fr}.catalog-nav{position:static;height:190px}.catalog-nav h3{margin:13px 6px 5px}.catalog-toolbar{align-items:start;flex-direction:column}.catalog-toolbar input{max-width:none}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding:0 16px}.lab-title h1{font-size:23px}dialog{padding:16px}.preview-area{padding:8px}.masthead nav>a{display:none}footer{margin:0 16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}