:root{color-scheme:dark;--bg:#1a1a24;--panel:#20202d;--line:#3b394c;--purple:#8b6cf0;--lavender:#bfa8ff;--yellow:#f0c93e;--text:#f4f1fa;--muted:#a3a0b4;--shadow:#101017;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);background-image:radial-gradient(#4d465b40 1px,transparent 1px);background-size:22px 22px}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}button{transition:background .15s,transform .15s}button:not(:disabled):active{transform:translate(2px,2px)}a{color:inherit;text-decoration:none}.site-shell{max-width:1180px;margin:auto;padding:0 40px}.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:800;white-space:nowrap}.brand-icon{width:32px;height:32px;display:grid;place-items:center;background:var(--purple);border:2px solid var(--lavender);color:#fff;box-shadow:3px 3px 0 #0c0c13;font-size:24px}.brand-en{font:9px/1.6 "Courier New",monospace;letter-spacing:1px;margin-left:8px;color:var(--muted)}.edition{font-size:11px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:8px}.status-dot{width:6px;height:6px;background:var(--yellow);box-shadow:0 0 10px #f0c93e40}.hero{position:relative;padding:47px 0 38px}.eyebrow{font:11px "Courier New",monospace;letter-spacing:1.8px;color:var(--lavender);display:flex;align-items:center;gap:10px}.tiny-star{color:var(--yellow);font-size:19px}.hero h1{font-family:"Courier New","Microsoft YaHei",monospace;letter-spacing:2px;font-size:clamp(32px,4.7vw,51px);font-weight:900;line-height:1.5;margin:13px 0 10px;text-shadow:3px 3px 0 #0a0a10}.highlight{color:var(--lavender);position:relative;display:inline-block;margin-left:4px}.underline-pixels{position:absolute;left:0;right:0;bottom:4px;height:5px;background:repeating-linear-gradient(90deg,var(--purple) 0 14px,transparent 14px 18px);opacity:.6}.title-note{display:inline-block;color:var(--yellow);font-size:42px;transform:rotate(12deg);margin-left:18px}.hero p{font-size:14px;color:var(--muted);letter-spacing:.6px;margin:9px 0 0}.mobile-break{display:none}.hero-sticker{position:absolute;right:20px;top:54px;border:2px solid var(--line);padding:16px 24px;transform:rotate(8deg);background:#232330;box-shadow:5px 5px 0 var(--shadow);text-align:center}.hero-sticker span{display:block;font:bold 31px "Courier New",monospace;color:var(--yellow)}.hero-sticker small{font-size:10px;color:var(--muted);letter-spacing:2px}.hero-sticker i{position:absolute;right:-14px;top:-15px;font-size:35px;color:var(--lavender);font-style:normal}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:stretch}.panel{border:2px solid var(--line);background:var(--panel);box-shadow:7px 7px 0 var(--shadow);padding:25px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:10px}h2{font-size:16px;margin:0;letter-spacing:.4px}.panel-heading h2{display:flex;align-items:center;gap:11px}.step{font:bold 11px "Courier New",monospace;color:var(--lavender);border:1px solid #65528e;background:#30283f;min-width:25px;height:24px;display:inline-grid;place-items:center}.micro-label{font:9px "Courier New",monospace;letter-spacing:1.4px;color:var(--muted)}.field-label{display:block;font-size:13px;color:#d8d4e4;margin-bottom:12px}.textarea-wrap{position:relative}textarea{display:block;width:100%;resize:vertical;min-height:139px;max-height:300px;background:#181820;border:1px solid #454052;color:var(--text);padding:16px 16px 32px;font-size:14px;line-height:1.9;border-radius:0}textarea::placeholder{color:#777385}.char-count{position:absolute;right:12px;bottom:11px;font:10px "Courier New",monospace;color:#8b849e}.examples{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:12px;font-size:10px;color:var(--muted)}.examples button{font-size:10px;padding:4px 6px;background:#292635;border:1px solid #40394e;color:#bab0cd}.examples button:hover{color:var(--yellow);border-color:var(--yellow)}fieldset{border:0;padding:0;margin:24px 0}.emotion-field legend{font-size:13px;margin-bottom:12px;width:100%;padding:0}.emotion-field legend span{font-size:10px;color:var(--muted);float:right}.emotion-options{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.emotion-options label{position:relative;cursor:pointer;min-width:0}.emotion-options input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}.emotion-options label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);height:61px;font-size:11px;color:var(--muted);background:#252432}.emotion-options b{font:21px "Courier New",monospace;line-height:24px;font-weight:400}.emotion-options input:checked+span{background:#382d52;border-color:var(--purple);color:#d2bdff;box-shadow:inset 0 -2px 0 var(--purple)}.emotion-options input:focus-visible+span{outline:2px solid var(--yellow);outline-offset:3px}.primary-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:49px;border:2px solid #ac93f9;background:var(--purple);color:#fff;font-size:15px;font-weight:700;box-shadow:4px 4px 0 var(--shadow);padding:10px 20px}.input-panel .primary-button{width:100%}.primary-button:hover:not(:disabled){background:#9c7df9}.button-arrow{margin-left:auto;font-size:23px}.input-panel .primary-button>span:first-child{margin-right:auto;color:var(--yellow);font-size:21px}.privacy-note{font-size:10px;color:var(--muted);text-align:center;margin:15px 0 22px}.privacy-note span{color:#968ba8;margin-right:3px}.advanced{border-top:1px dashed var(--line);padding-top:16px;font-size:11px}.advanced summary{cursor:pointer;color:#beb6cc}.advanced summary span{float:right;color:#847b96;font-size:10px}.advanced-body{display:grid;gap:9px;margin-top:16px}.advanced-body p{color:var(--muted);font-size:11px;line-height:1.8;margin:0 0 7px}.advanced-body input:not([type=checkbox]){width:100%;padding:10px;background:#17171f;border:1px solid var(--line);color:var(--text);border-radius:0}.switch-label{display:flex;align-items:center;gap:6px}.advanced input[type=checkbox],.hide-text input{accent-color:var(--purple)}.player-panel{background:linear-gradient(145deg,#282335,#20202c 65%);padding-bottom:19px}.player-panel .panel-heading{margin-bottom:20px}.cassette{width:86%;max-width:360px;height:177px;margin:0 auto 24px;border:3px solid #ad92eb;background:#8f76c7;box-shadow:6px 6px 0 #15131d;position:relative;padding:13px 19px 0;color:#2d223d}.cassette-top{display:flex;justify-content:space-between;font:bold 8px "Courier New",monospace;letter-spacing:1px;margin-bottom:8px}.cassette-label{background:#e6dcba;border:2px solid #392d4c;padding:7px 12px 5px}.tape-caption{font-size:12px;font-weight:700;letter-spacing:2px;display:block;text-align:center;border-bottom:1px solid #b4a68f;padding-bottom:5px}.cassette-window{height:45px;margin:7px 7px 5px;background:#272330;border:2px solid #504657;display:flex;align-items:center;justify-content:space-between;padding:0 7px}.reel{width:31px;height:31px;background:#b6a9c0;border:5px solid #776a85;border-radius:50%;position:relative}.reel i{position:absolute;inset:4px;background:#282330}.reel:before,.reel:after{content:"";position:absolute;background:#e2d8e7;width:3px;height:29px;left:9px;top:-4px;transform:rotate(45deg)}.reel:after{transform:rotate(-45deg)}.playing .reel{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tape-lines{width:45%;display:grid;gap:4px}.tape-lines span{height:2px;background:#66516d}.tape-bottom{display:flex;justify-content:space-between;font:bold 7px "Courier New",monospace;letter-spacing:1px}.cassette-base{height:23px;margin:7px auto 0;border:2px solid #625080;border-bottom:0;width:65%;display:flex;align-items:center;justify-content:space-around;background:#7d65ad;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%)}.cassette-base i{width:7px;height:7px;background:#30253e;border-radius:50%}.cassette-base span{height:7px;width:42%;border:1px solid #b49bdd;background:#6d578e}.screw{font:12px monospace;position:absolute;color:#423451}.s1{left:4px;top:2px}.s2{right:4px;top:2px}.s3{left:4px;bottom:2px}.s4{right:4px;bottom:2px}.track-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.track-heading .micro-label{margin:0 0 7px;font-size:8px}.track-heading h3{font-size:17px;margin:0;font-weight:600;letter-spacing:.6px}.emotion-badge{font-size:10px;color:var(--lavender);background:#362c47;border:1px solid #5c477a;padding:5px 8px;white-space:nowrap}.track-description{font-size:11px;color:var(--muted);margin:9px 0 12px;min-height:17px}#waveform{display:block;width:100%;height:48px}.journey{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;gap:6px}.journey>span{font-size:10px;color:#aaa0bb;display:flex;align-items:center;gap:5px;white-space:nowrap}.journey i{width:5px;height:5px;display:inline-block;background:#847298}.journey>span:nth-child(2) i{background:#ad8fe7}.journey>span:nth-child(3) i{background:var(--yellow)}.journey small{font:8px "Courier New",monospace;margin-left:auto;color:#82788f}.journey .active{color:var(--yellow)}.progress-track{height:4px;background:#3c344d;margin-top:13px;overflow:hidden}.progress-track>span{display:block;height:100%;width:0;background:var(--yellow)}.player-controls{display:flex;justify-content:space-between;align-items:center;margin-top:13px;gap:10px}.time{font:10px "Courier New",monospace;color:var(--muted);min-width:92px}.transport{display:flex;align-items:center;gap:13px}.play-button{height:35px;width:39px;border:1px solid var(--lavender);background:var(--purple);color:white;box-shadow:3px 3px 0 var(--shadow);font-size:13px}.stop-button{border:0;background:none;color:var(--muted);font-size:13px;padding:9px}.volume-label{display:flex;align-items:center;gap:5px;color:var(--muted)}.volume-label input{width:61px;accent-color:var(--lavender);height:4px}.listen-tip{text-align:center;color:#90849f;font-size:10px;margin:16px 0 0}.share-panel{border:2px solid var(--line);margin-top:26px;padding:23px 25px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:#20202bd9;box-shadow:5px 5px 0 var(--shadow)}.share-intro{display:flex;align-items:center;gap:14px}.share-intro h2{font-size:14px}.share-intro p{font-size:11px;color:var(--muted);margin:7px 0 0}.share-actions{display:flex;align-items:center;gap:18px}.hide-text{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);white-space:nowrap}.secondary-button{background:#2d293a;border:1px solid #665578;color:#d6c5ed;padding:11px 17px;font-size:12px;box-shadow:3px 3px 0 var(--shadow);min-height:41px}.secondary-button span{margin-left:18px}.secondary-button:hover:not(:disabled){background:#40324f}.message{min-height:20px;font-size:11px;line-height:1.7;text-align:center;color:var(--muted);margin:20px 0 0}.message.error{color:#ffc2b8}.footnote{display:flex;flex-direction:column;align-items:center;text-align:center;margin:24px 0 33px}.pixel-flower{font-size:27px;color:var(--yellow)}.footnote p{font-size:12px;line-height:1.9;color:var(--muted);margin:9px 0}.footnote strong{color:#c2b8d3;font-weight:400}.footnote .micro-label{font-size:8px;letter-spacing:1.9px;color:#71677e}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:22px 0;font-size:10px;color:#8b829b}footer i{font-style:normal;margin:0 5px}footer b{color:var(--purple);margin-left:8px}dialog{max-width:440px;width:calc(100% - 32px);max-height:92dvh;overflow:auto;padding:20px;background:var(--bg);border:2px solid var(--purple);color:var(--text);box-shadow:8px 8px 0 #0b0b12}dialog::backdrop{background:#090810d9;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.dialog-top h2{font-size:15px}.dialog-top button{border:0;background:none;color:var(--text);font-size:28px;line-height:1}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}#share-canvas{width:100%;height:auto;display:block}dialog p{font-size:10px;line-height:1.7;color:var(--muted)}
@media(min-width:1400px){.site-shell{max-width:1220px}.hero{padding-top:57px;padding-bottom:46px}.panel{padding:29px}.panel-heading{margin-bottom:30px}.cassette{height:182px;margin-bottom:29px}.cassette-label{padding-top:9px;padding-bottom:7px}.hero-sticker{top:65px}}
@media(max-width:1000px){.site-shell{padding:0 25px}.hero-sticker{right:5px;transform:rotate(8deg) scale(.8)}.brand-en{display:none}.panel{padding:21px}.workspace{gap:19px}.journey small{display:none}.cassette{width:96%}.share-actions{gap:10px}.share-panel{padding:20px}.time{font-size:9px;min-width:81px}.volume-label input{width:45px}}
@media(max-width:760px){.site-shell{max-width:540px;padding:0 20px}.topbar{min-height:72px}.brand{font-size:14px;gap:8px}.brand-icon{width:27px;height:27px;font-size:20px}.edition{font-size:9px;gap:5px}.hero{padding:33px 0 28px}.hero h1{font-size:35px;line-height:1.6;margin-top:12px;letter-spacing:2px}.hero p{font-size:12px;line-height:1.9;max-width:270px}.hero-sticker{right:-10px;top:85px;transform:rotate(9deg) scale(.65);transform-origin:right center}.hero-sticker span{font-size:28px}.mobile-break{display:block}.title-note{font-size:33px;margin-left:12px}.eyebrow{font-size:8px;letter-spacing:1px;gap:6px}.workspace{grid-template-columns:1fr;gap:23px}.panel{padding:21px 18px;box-shadow:5px 5px 0 var(--shadow)}.panel-heading{margin-bottom:22px}h2{font-size:15px}.emotion-options{gap:6px}.emotion-options label>span{height:60px;font-size:11px}.privacy-note{font-size:9px;line-height:1.7}.examples{font-size:9px;gap:5px}.examples button{font-size:9px}.cassette{width:93%;max-width:340px;margin-top:8px;margin-bottom:26px}.player-panel{padding-bottom:23px}.journey small{display:inline;font-size:7px}.player-controls{margin-top:17px}.time{font-size:10px}.volume-label input{width:58px}.share-panel{margin-top:23px;align-items:stretch;flex-direction:column;padding:21px 18px;gap:19px}.share-actions{justify-content:space-between;gap:8px}.share-intro h2{font-size:14px}.secondary-button{padding:11px 13px;font-size:11px}.share-actions .secondary-button span{margin-left:8px}.hide-text{font-size:10px}.footnote{margin:19px 0 27px}footer{font-size:9px;gap:12px;line-height:1.7;padding:18px 0}.message{font-size:10px}.hero-sticker small{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:760px){.hero-sticker{right:8px}}
.brewing .cassette{animation:brew 1.2s steps(4,end) infinite}.brewing .micro-label{color:var(--yellow)}
@keyframes brew{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
dialog:not([open]){display:none}.fallback-dialog[open]{display:block;position:fixed;inset:5vh 0 auto;z-index:10;margin:auto;box-shadow:0 0 0 100vmax #090810d9;max-height:90vh}
#share-message{min-height:34px;color:#d5c6e6}
.sound-controls{display:flex;align-items:center;gap:12px;font-size:12px}.sound-controls select{min-width:0;max-width:100%;padding:8px;background:var(--bg);color:var(--text);border:1px solid var(--line);font:inherit}.sound-controls select:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}#sound-status{min-height:1.5em;overflow-wrap:anywhere}#sample-progress{width:100%;height:6px;accent-color:var(--purple)}
@media(max-width:760px){textarea,.advanced-body input:not([type=checkbox]){font-size:16px}.play-button,.stop-button{min-width:40px;min-height:40px}dialog{max-height:90vh;max-height:90dvh}}

/* Public project links */
footer a { color: inherit; text-underline-offset: 3px; }