@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#29271e; --muted:#77705a; --line:#e5d9b0; --paper:#fbf6de; --panel:#fffdf2; --yellow:#f4c949; --yellow-soft:#fff0a9; --green:#6f9b70; --shadow:0 18px 52px rgba(116,88,20,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 82% 8%,rgba(244,201,73,.22),transparent 29%),var(--paper); font-family:Manrope,ui-sans-serif,system-ui,sans-serif; }
button,select,input { font:inherit; }
button { cursor:pointer; }
.ambient { position:fixed; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:-1; }
.ambient-one { width:480px; height:480px; right:6vw; top:-180px; background:rgba(245,204,77,.12); }
.ambient-two { width:360px; height:360px; left:18vw; bottom:-220px; background:rgba(127,164,116,.09); }
.app-shell { display:grid; grid-template-columns:88px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; border-right:1px solid var(--line); background:rgba(255,249,221,.82); backdrop-filter:blur(14px); z-index:5; }
.brand-mark { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; margin-top:28px; background:var(--ink); color:#fff; font-weight:800; font-size:22px; transform:rotate(-8deg); }
.brand-mark span { transform:rotate(8deg); }
.sidebar-label { margin-top:17px; text-align:center; color:#a0a198; font:500 9px/1.4 'DM Mono',monospace; letter-spacing:.12em; }
.side-nav { display:flex; flex-direction:column; gap:10px; margin-top:66px; }
.side-link { border:0; background:none; width:66px; padding:12px 5px 10px; border-radius:15px; color:#96978f; display:flex; flex-direction:column; align-items:center; gap:7px; font-size:10px; }
.side-link.active,.side-link:hover { color:var(--ink); background:#fff; box-shadow:0 8px 20px rgba(37,37,26,.07); }
.nav-icon { font-size:21px; line-height:1; }
.sidebar-bottom { margin-top:auto; margin-bottom:28px; writing-mode:vertical-rl; display:flex; align-items:center; gap:9px; color:#999a91; font:10px 'DM Mono',monospace; letter-spacing:.08em; }
.online-dot,.demo-state i { width:7px; height:7px; border-radius:50%; background:#79a976; display:inline-block; box-shadow:0 0 0 4px rgba(121,169,118,.13); }
.main-content { width:min(1440px,100%); margin:0 auto; padding:0 6.4vw 44px; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.crumb { color:#76776e; font:11px 'DM Mono',monospace; letter-spacing:.02em; }
.crumb-dot { display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:var(--yellow); }
.topbar-actions { display:flex; align-items:center; gap:14px; }
.version-pill { border:1px solid #d8d9d0; border-radius:99px; color:#77786e; padding:6px 10px; font:10px 'DM Mono',monospace; }
.icon-button { width:28px; height:28px; border:1px solid #d8d9d0; border-radius:50%; color:#85867d; background:transparent; }
.hero { min-height:420px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:5vw; padding:45px 0 38px; }
.eyebrow,.section-kicker { margin:0 0 16px; color:#9a9b91; font:11px 'DM Mono',monospace; letter-spacing:.12em; }
h1,h2,p { margin-top:0; }
h1 { max-width:650px; margin-bottom:25px; font-size:clamp(48px,6vw,88px); line-height:.98; letter-spacing:-.075em; font-weight:700; }
h1 em { color:#bb8b12; font-style:normal; }
.hero-text { width:min(430px,100%); color:#77786e; font-size:16px; line-height:1.8; }
.hero-notes { display:flex; flex-wrap:wrap; gap:22px; margin-top:25px; color:#8b8c82; font-size:11px; }
.note-line span { margin-right:8px; color:#c69d27; font:11px 'DM Mono',monospace; }.note-line b { color:var(--ink); font-weight:700; }
.hero-character-wrap { height:360px; position:relative; overflow:hidden; border-radius:42% 42% 17% 17% / 28% 28% 12% 12%; background:linear-gradient(145deg,#fffdf3,#f0e6b7); box-shadow:var(--shadow); }
.hero-character-wrap::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(244,201,73,.18)); mix-blend-mode:color; pointer-events:none; }
.hero-character { position:absolute; width:119%; max-width:none; height:119%; object-fit:cover; object-position:50% 47%; mix-blend-mode:multiply; left:-6%; top:-4%; filter:saturate(1.1) contrast(1.02); }
.character-orbit { position:absolute; border:1px solid rgba(184,141,18,.32); border-radius:50%; z-index:1; pointer-events:none; }.orbit-a { width:360px;height:360px;left:-55px;top:68px;transform:rotate(-22deg); }.orbit-b { width:240px;height:240px;right:-54px;top:20px;transform:rotate(28deg); }
.character-tag { position:absolute; left:29px; bottom:29px; z-index:2; color:#66521f; }.character-tag span { display:block; margin-bottom:8px; font:10px 'DM Mono',monospace; letter-spacing:.1em; }.character-tag strong { font-size:19px; line-height:1.02; letter-spacing:-.06em; }
.hero-badge { position:absolute; right:27px; top:27px; z-index:2; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; text-align:center; background:var(--ink); color:var(--yellow); font-size:19px; line-height:.7; }.hero-badge span { font:8px 'DM Mono',monospace; line-height:1.05; letter-spacing:.06em; }
.workspace-section,.visualizer-section,.activity-section { padding-top:21px; scroll-margin-top:30px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:14px; }.compact-heading { margin-top:43px; }.section-heading h2 { margin:0; font-size:28px; line-height:1; letter-spacing:-.06em; }.section-kicker { margin-bottom:8px; }.demo-state,.path-label,.tiny-muted { color:#92938a; font:10px 'DM Mono',monospace; letter-spacing:.05em; }.demo-state i { margin-right:9px; width:6px; height:6px; }
.converter-grid { display:grid; grid-template-columns:1fr .8fr; gap:16px; }.panel { border:1px solid var(--line); background:rgba(255,254,242,.82); box-shadow:0 10px 30px rgba(116,88,20,.055); }.upload-panel,.settings-panel { min-height:315px; border-radius:24px; padding:20px; }.panel-topline { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; font-size:12px; font-weight:700; }.tiny-muted { font-size:9px; font-weight:400; }
.dropzone { min-height:220px; border:1px dashed #c9b66e; border-radius:18px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; transition:.25s ease; background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(252,238,166,.48)); }.dropzone:hover,.dropzone.dragover { border-color:#be961b; background:#fff3bf; transform:translateY(-2px); }.dropzone input { display:none; }.upload-symbol { width:50px; height:50px; border-radius:16px; position:relative; margin-bottom:14px; background:var(--yellow); transform:rotate(-7deg); }.upload-symbol span { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--ink); }.upload-symbol span:nth-child(1) { left:13px; top:15px; }.upload-symbol span:nth-child(2) { right:13px; top:15px; }.upload-symbol span:nth-child(3) { left:20px; bottom:12px; width:10px; height:4px; border-radius:6px; }.dropzone strong { font-size:16px; }.dropzone small { margin-top:8px; color:#898a81; font-size:11px; }.browse-link { margin-top:14px; color:#ae8310; font-size:11px; font-weight:700; }.browse-link b { font-size:14px; margin-left:4px; }.selected-file { display:flex; align-items:center; gap:12px; padding:13px 15px; margin-top:13px; border-radius:15px; background:#fff3bd; }.selected-file[hidden] { display:none; }.file-type { display:grid; place-items:center; width:41px; height:41px; border-radius:12px; color:#fff; background:var(--ink); font:10px 'DM Mono',monospace; }.file-meta { display:flex; flex-direction:column; min-width:0; flex:1; gap:4px; }.file-meta strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.file-meta span { color:#97988e; font-size:10px; }.remove-file { border:0; background:none; color:#96978e; font-size:22px; }
.setting-block { margin-bottom:17px; }.setting-block label { display:block; margin-bottom:8px; color:#8b8c83; font-size:10px; }.select-wrap { position:relative; }.select-wrap select { width:100%; appearance:none; border:1px solid #dfe0d7; border-radius:12px; padding:12px 35px 12px 13px; background:#fff; color:var(--ink); outline:0; font-size:12px; }.select-wrap span { position:absolute; right:13px; top:11px; pointer-events:none; color:#9a9b92; }.quick-formats { display:flex; align-items:center; gap:6px; margin:22px 0 20px; flex-wrap:wrap; }.quick-formats span { margin-right:auto; color:#97988e; font:9px 'DM Mono',monospace; }.quick-formats button { border:1px solid #e1e1d8; background:#fff; border-radius:9px; padding:5px 8px; color:#74756b; font:10px 'DM Mono',monospace; }.quick-formats button:hover,.quick-formats button.active { border-color:#c39819; background:#fff2bb; color:#6c5516; }.convert-button { width:100%; display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border:0; border-radius:12px; color:#fff; background:var(--ink); font-size:12px; font-weight:700; transition:.25s; }.convert-button:hover { background:#45463b; transform:translateY(-1px); }.convert-button:disabled { cursor:wait; opacity:.65; }.convert-button b { font-size:20px; line-height:10px; }.server-hint { margin:10px 0 0; color:#a0a198; font-size:9px; line-height:1.5; }
.compatibility-hint { min-height:31px; display:flex; align-items:center; margin:-4px 0 13px; padding:8px 10px; border-radius:10px; color:#8f7b3b; background:#fff8d7; font-size:9px; line-height:1.45; }.compatibility-hint.compatible { color:#4e7958; background:#eef7e9; }.compatibility-hint.warning { color:#986d13; background:#fff3cf; }.compatibility-hint[hidden] { display:none; }
.result-actions { display:flex; align-items:center; gap:12px; margin-top:12px; padding-top:11px; border-top:1px solid #eee4bf; }.result-actions[hidden] { display:none; }.open-result-button { border:0; border-radius:10px; padding:9px 12px; color:#fff; background:#b78916; font-size:10px; font-weight:700; }.open-result-button:hover { background:#8f6b12; }.open-result-button span { margin-right:5px; font-size:13px; }.download-result-link { color:#91721f; font:10px 'DM Mono',monospace; text-decoration:none; }.download-result-link:hover { text-decoration:underline; }
.result-preview { margin-top:13px; border-radius:15px; padding:11px; background:rgba(255,255,255,.58); box-shadow:none; }.result-preview[hidden] { display:none; }.preview-header { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; color:#8b8c83; font:9px 'DM Mono',monospace; }.preview-header span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.preview-body { min-height:64px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:#fffdf5; }.preview-frame { width:100%; height:180px; border:0; background:#fff; }.preview-text { width:100%; max-height:180px; overflow:auto; margin:0; padding:12px; color:#585947; font:10px/1.65 'DM Mono',monospace; white-space:pre-wrap; text-align:left; }.preview-audio { width:100%; height:34px; }.preview-image { display:block; max-width:100%; max-height:180px; object-fit:contain; }.preview-note { padding:16px 10px; color:#9a9b91; font-size:10px; line-height:1.6; text-align:center; }
.path-card { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:23px 28px 28px; border-radius:24px; overflow:hidden; }.path-line { position:absolute; height:1px; left:10%; right:17%; top:58px; background:#dadbd1; }.path-progress { height:100%; width:0%; background:#d7ae28; transition:width .5s ease; }.path-node { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px; }.node-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#9b9c91; background:#f2eedb; font-size:20px; transition:.35s; }.path-node strong { font-size:12px; }.path-node small { color:#a0a198; font-size:10px; }.path-node.active .node-icon,.path-node.done .node-icon { background:var(--yellow); color:var(--ink); box-shadow:0 0 0 7px rgba(244,201,73,.13); }.path-character { position:absolute; right:-10px; bottom:-34px; width:128px; height:128px; border-radius:50%; overflow:hidden; opacity:.92; background:#f7da68; border:4px solid rgba(255,250,213,.8); box-shadow:0 6px 18px rgba(145,105,12,.16); }.path-character img { position:absolute; width:138%; max-width:none; height:138%; left:-19%; top:-16%; object-fit:cover; object-position:58% 20%; mix-blend-mode:multiply; }.path-character span { position:absolute; right:9px; top:14px; color:#71581a; font:9px 'DM Mono',monospace; line-height:1.15; transform:rotate(8deg); }.path-character b { font-size:17px; }
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:13px; }.insight-card { min-height:87px; display:flex; align-items:center; gap:12px; position:relative; border-radius:17px; padding:17px; }.insight-index { align-self:flex-start; color:#c39b29; font:10px 'DM Mono',monospace; }.insight-card p { margin:0 0 7px; color:#989990; font-size:10px; }.insight-card strong { font-size:13px; }.insight-icon { position:absolute; right:17px; top:24px; color:#dad3ae; font:20px 'DM Mono',monospace; }
.activity-card { min-height:128px; border-radius:21px; padding:20px; }.empty-log { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:86px; color:#a3a49b; text-align:center; }.empty-log span { color:#dbc46c; font-size:22px; }.empty-log p { margin:5px 0 3px; font-size:12px; }.empty-log small { font-size:10px; }.log-item { display:grid; grid-template-columns:40px 1fr auto; gap:13px; align-items:center; padding:12px 0; border-bottom:1px solid #ecece5; }.log-item:last-child { border-bottom:0; }.log-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#67541d; background:#fff1b8; font-size:15px; }.log-copy strong { display:block; font-size:11px; }.log-copy small { display:block; margin-top:4px; color:#9a9b91; font:9px 'DM Mono',monospace; }.log-time { color:#aaaba2; font:9px 'DM Mono',monospace; }.clear-log { padding:5px 0; color:#9b9c93; border:0; background:none; font-size:10px; }.clear-log:hover { color:#a57b05; }
.engine-download-card { display:grid; grid-template-columns:.8fr 1.2fr; gap:22px; align-items:center; border-radius:21px; padding:19px 20px; }.engine-download-copy strong { display:block; font-size:13px; }.engine-download-copy p { margin:8px 0 0; color:#8f9087; font-size:10px; line-height:1.65; }.engine-download-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.engine-download-button { position:relative; display:flex; flex-direction:column; gap:5px; min-height:72px; padding:12px 25px 10px 12px; border:1px solid #e4d8ac; border-radius:13px; color:var(--ink); background:#fffdf2; text-decoration:none; transition:.2s; }.engine-download-button:hover { border-color:#c69d27; background:#fff1b8; transform:translateY(-1px); }.engine-download-button span { font-size:11px; font-weight:700; }.engine-download-button small { color:#96978e; font:9px 'DM Mono',monospace; }.engine-download-button b { position:absolute; right:10px; top:10px; color:#b58a18; font-size:14px; }.engine-download-note { display:block; grid-column:1/-1; margin-top:1px; color:#aaa58d; font:9px 'DM Mono',monospace; }
.footer { display:flex; justify-content:space-between; padding-top:42px; color:#b0a98e; font:9px 'DM Mono',monospace; letter-spacing:.05em; }.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,20px); opacity:0; pointer-events:none; border-radius:99px; padding:10px 17px; background:var(--ink); color:white; box-shadow:var(--shadow); font-size:11px; transition:.25s; z-index:10; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:900px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:fixed; width:100%; height:61px; bottom:0; top:auto; flex-direction:row; justify-content:space-around; border:0; border-top:1px solid var(--line); }.brand-mark,.sidebar-label,.sidebar-bottom { display:none; }.side-nav { flex-direction:row; margin:0; }.side-link { width:84px; padding:7px 5px; }.main-content { padding:0 5vw 88px; }.hero { grid-template-columns:1fr; padding-top:55px; }.hero-character-wrap { height:380px; }.converter-grid { grid-template-columns:1fr; }.settings-panel { min-height:0; }.path-character { opacity:.65; }.engine-download-card { grid-template-columns:1fr; }.engine-download-grid { grid-template-columns:repeat(2,1fr); }.footer { gap:20px; flex-direction:column; } }
@media (max-width:560px) { .topbar { height:72px; }.crumb { font-size:9px; }.version-pill { display:none; } h1 { font-size:52px; }.hero { padding-top:43px; }.hero-character-wrap { height:330px; border-radius:29px; }.hero-notes { flex-direction:column; gap:10px; }.section-heading h2 { font-size:24px; }.demo-state,.path-label { font-size:8px; }.upload-panel,.settings-panel { padding:17px; }.path-card { padding-left:11px; padding-right:11px; }.path-node strong { font-size:10px; }.path-node small { font-size:8px; }.node-icon { width:40px; height:40px; }.path-line { top:56px; left:12%; right:12%; }.insight-grid { grid-template-columns:1fr; }.insight-card { min-height:73px; } }