*{box-sizing:border-box}body{margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif;background-color:#0f0f0f;color:#f1e5ac;display:flex;flex-direction:column;align-items:center;overflow-x:hidden;width:100%}.javanese-text.svelte-1n46o8q,[translate=no].svelte-1n46o8q,.p-jav.svelte-1n46o8q,.feature-icon.svelte-1n46o8q,.step-jav.svelte-1n46o8q,.sand-sect.svelte-1n46o8q li:where(.svelte-1n46o8q) span:where(.svelte-1n46o8q),.rekan-item.svelte-1n46o8q span:where(.svelte-1n46o8q),.ex-header.svelte-1n46o8q span:where(.svelte-1n46o8q),.alphabet-grid.svelte-1n46o8q span:where(.svelte-1n46o8q){font-family:Javanese Text,Noto Sans Javanese,serif;line-height:2.2}.navbar.svelte-1n46o8q{position:sticky;top:1rem;width:90%;margin:1rem auto 0;background:#121212cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #c5a02844;border-radius:12px;z-index:1000;padding:.75rem 1.5rem;box-shadow:0 4px 30px #00000080}.nav-container.svelte-1n46o8q{display:flex;justify-content:space-between;align-items:center;max-width:900px;margin:0 auto;width:100%}.nav-logo.svelte-1n46o8q{color:#c5a028;text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.05em;transition:color .3s ease}.nav-logo.svelte-1n46o8q:hover{color:#f1e5ac}.lang-switch.svelte-1n46o8q{display:flex;align-items:center;gap:.5rem;color:#444;font-size:.8rem}.lang-switch.svelte-1n46o8q button:where(.svelte-1n46o8q){background:none;border:none;color:#5c584a;cursor:pointer;padding:.2rem .5rem;font-size:.8rem;font-weight:300;transition:all .4s cubic-bezier(.4,0,.2,1);border-radius:4px;letter-spacing:.02em}.lang-switch.svelte-1n46o8q button:where(.svelte-1n46o8q):hover:not(.active){color:#8e7218;background:#c5a0280d}.lang-switch.svelte-1n46o8q button.active:where(.svelte-1n46o8q){color:#c5a028;font-weight:300;background:#c5a0281a;letter-spacing:.02em}main.svelte-1n46o8q{width:100%;max-width:900px;padding:clamp(2rem,8vw,4rem) clamp(1rem,5vw,2rem);display:flex;flex-direction:column;min-width:0}header.svelte-1n46o8q{text-align:left;margin-bottom:4rem;width:100%;padding-top:1rem}.title-row.svelte-1n46o8q{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;width:100%;margin-bottom:.5rem}.scroll-notice.svelte-1n46o8q{font-size:.8rem;color:#6b6654;font-style:italic;margin-bottom:.8rem;animation:svelte-1n46o8q-bounce 2s infinite}@keyframes svelte-1n46o8q-bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-5px)}60%{transform:translateY(-3px)}}h1.svelte-1n46o8q{font-size:clamp(2rem,8vw,3.5rem);background:linear-gradient(135deg,#c5a028,#f1e5ac,#8e7218);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;line-height:1.8;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));padding:1rem 0 .8rem;overflow:visible;font-family:Javanese Text,Noto Sans Javanese,serif}h3.svelte-1n46o8q{font-size:clamp(1rem,4vw,1.4rem);letter-spacing:.4em;text-transform:uppercase;margin:0;color:#c5a028;opacity:.9;font-weight:600}header.svelte-1n46o8q p.subtitle:where(.svelte-1n46o8q){color:#6b6654;font-style:italic;margin-top:.5rem;font-size:clamp(.8rem,2.5vw,.95rem);margin-left:.2rem}.converter.svelte-1n46o8q{background:#121212;padding:clamp(1rem,5vw,2.5rem);border-radius:16px;border:1px solid #c5a02822;box-shadow:0 20px 50px #0009;display:flex;flex-direction:column;gap:2rem;margin-bottom:clamp(2rem,8vw,4rem);position:relative;width:100%}.converter.svelte-1n46o8q:after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;box-shadow:inset 0 0 20px #c5a0280a}.input-group.svelte-1n46o8q{display:flex;flex-direction:column;gap:.75rem;width:100%}label.svelte-1n46o8q{font-size:.75rem;color:#8e7218;text-transform:uppercase;letter-spacing:.2em;font-weight:700}textarea.svelte-1n46o8q,.output-area.svelte-1n46o8q{width:100%;min-height:clamp(120px,30vh,160px);padding:clamp(.75rem,3vw,1.5rem);background:#0a0a0a;border:1px solid #2a2515;border-radius:10px;font-size:clamp(1.1rem,4vw,1.3rem);color:#d4ccb0;transition:all .4s ease}textarea.svelte-1n46o8q:focus{outline:none;border-color:#c5a02844;box-shadow:0 0 20px #c5a02811}.mode-switch-row.svelte-1n46o8q{display:flex;justify-content:center;margin:-1rem 0;z-index:5}.toggle-mode-btn.svelte-1n46o8q{background:#1a1a1a;border:1px solid #c5a02844;color:#c5a028;padding:.5rem 1.2rem;border-radius:20px;cursor:pointer;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:.6rem;transition:all .3s ease;box-shadow:0 4px 15px #0000004d}.toggle-mode-btn.svelte-1n46o8q:hover{background:#c5a028;color:#0f0f0f;transform:scale(1.05)}.mode-arrow.svelte-1n46o8q{font-size:1rem}.output-area.svelte-1n46o8q{background:#050505;word-break:break-all;display:flex;align-items:flex-start;justify-content:flex-start;border-style:solid;position:relative;overflow:hidden}.javanese-text.svelte-1n46o8q{font-size:clamp(1.8rem,8vw,3.2rem);line-height:2.5;background:linear-gradient(to bottom,#f1e5ac,#c5a028);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px rgba(197,160,40,.15));width:100%}.latin-result-text.svelte-1n46o8q{font-size:clamp(1.2rem,5vw,1.8rem);line-height:1.6;color:#f1e5ac;width:100%}.placeholder.svelte-1n46o8q{color:#3d3a2f;font-style:italic;font-size:1rem}.copy-btn.svelte-1n46o8q{align-self:flex-end;padding:.8rem 2rem;background:linear-gradient(135deg,#c5a028,#8e7218);color:#0f0f0f;border:none;border-radius:8px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;box-shadow:0 4px 15px #0006;transition:all .3s ease}.copy-btn.svelte-1n46o8q:hover{transform:translateY(-1px);box-shadow:0 6px 20px #c5a02833;filter:brightness(1.1)}.guide.svelte-1n46o8q{margin-top:2rem;width:100%}.guide-header.svelte-1n46o8q{text-align:center;margin-bottom:3rem}.guide-header.svelte-1n46o8q h2:where(.svelte-1n46o8q){color:#8e7218;text-transform:uppercase;letter-spacing:.4em;font-size:1.1rem;font-weight:300}.gilded-line.svelte-1n46o8q{height:1px;width:120px;margin:1rem auto;background:linear-gradient(90deg,transparent,#c5a02844,transparent)}.guide-content.svelte-1n46o8q{display:grid;grid-template-columns:1fr;gap:2rem;width:100%}.guide-card.svelte-1n46o8q{background:#0f0f0f;padding:clamp(1.2rem,5vw,2.5rem);border-radius:12px;border:1px solid #c5a02811;position:relative;width:100%;overflow:hidden}.guide-card.svelte-1n46o8q:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;background:radial-gradient(circle at top left,#c5a02805,transparent 40%);pointer-events:none}.full-width.svelte-1n46o8q{grid-column:1 / -1}.guide-card.svelte-1n46o8q p:where(.svelte-1n46o8q){color:#9e9882;line-height:1.6;margin-top:0}.section-desc.svelte-1n46o8q{font-size:.9rem;color:#9e9882;margin-bottom:1.5rem;line-height:1.6}.alphabet-grid.svelte-1n46o8q{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:clamp(.5rem,2vw,1.2rem);text-align:center;margin-top:1.5rem;width:100%}.alphabet-grid.svelte-1n46o8q div:where(.svelte-1n46o8q){display:flex;flex-direction:column;align-items:center;padding:1rem .25rem;background:#080808;border-radius:8px;border:1px solid #1a1a1a;transition:all .3s ease}.alphabet-grid.svelte-1n46o8q div:where(.svelte-1n46o8q):hover{border-color:#c5a02822;background:#0c0c0c;transform:translateY(-2px)}.alphabet-grid.svelte-1n46o8q span:where(.svelte-1n46o8q){font-size:clamp(1.5rem,6vw,2.5rem);background:linear-gradient(180deg,#f1e5ac,#c5a028);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.abugida-stylized.svelte-1n46o8q{display:flex;flex-direction:column;gap:1.5rem}.intro-p.svelte-1n46o8q{font-size:1rem;line-height:1.7;color:#9e9882;margin:0}.abugida-features.svelte-1n46o8q{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}.feature-item.svelte-1n46o8q{background:#050505;padding:1.5rem;border-radius:10px;border:1px solid #1a1a1a;display:flex;align-items:center;gap:1.2rem;box-shadow:inset 0 0 15px #00000080}.feature-icon.svelte-1n46o8q{font-size:2.2rem;color:#c5a028;min-width:45px;text-align:center;filter:drop-shadow(0 0 8px #c5a02822)}.feature-text.svelte-1n46o8q{display:flex;flex-direction:column}.feature-text.svelte-1n46o8q strong:where(.svelte-1n46o8q){color:#8e7218;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.3rem}.feature-text.svelte-1n46o8q span:where(.svelte-1n46o8q){font-size:.85rem;color:#5c584a;line-height:1.5}.comparison-header.svelte-1n46o8q{font-size:.7rem;text-transform:uppercase;color:#3d3a2f;letter-spacing:.25em;border-bottom:1px solid #1a1a1a;padding-bottom:.6rem;margin-top:1rem}.abugida-comparison.svelte-1n46o8q{background:#050505;padding:1.2rem;border-radius:8px;border:1px solid #151515;display:flex;flex-direction:column;gap:.6rem}.comp-item.svelte-1n46o8q{font-size:.85rem;color:#5c584a}.comp-item.svelte-1n46o8q strong:where(.svelte-1n46o8q){color:#8e7218;margin-right:.5rem;font-weight:500}.tutorial-split.svelte-1n46o8q{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;align-items:center;margin-top:1.5rem;width:100%}.live-demo-box.svelte-1n46o8q{background:#050505;padding:2rem;border-radius:12px;border:1px solid #c5a02818;box-shadow:0 10px 30px #0006;width:100%;min-height:360px;display:flex;flex-direction:column;justify-content:space-between}.demo-display.svelte-1n46o8q{display:flex;flex-direction:column;gap:1.8rem;width:100%}.demo-input-row.svelte-1n46o8q,.demo-output-row.svelte-1n46o8q{display:flex;flex-direction:column;gap:.4rem;width:100%}.demo-display.svelte-1n46o8q .label:where(.svelte-1n46o8q){font-size:.6rem;text-transform:uppercase;color:#5c584a;letter-spacing:.15em}.demo-display.svelte-1n46o8q .text:where(.svelte-1n46o8q){font-size:clamp(1rem,4vw,1.2rem);min-height:1.5em;color:#d4ccb0;font-family:monospace}.demo-output-row.svelte-1n46o8q .text:where(.svelte-1n46o8q){font-size:clamp(1.5rem,6vw,2.4rem);line-height:2.5;background:linear-gradient(to bottom,#f1e5ac,#c5a028);-webkit-background-clip:text;-webkit-text-fill-color:transparent;min-height:2.5em;padding-bottom:2.5rem;display:block}.cursor.svelte-1n46o8q{animation:svelte-1n46o8q-blink .8s infinite;color:#c5a028;display:inline-block;margin-left:2px;font-weight:100}@keyframes svelte-1n46o8q-blink{0%,to{opacity:1}50%{opacity:0}}.demo-caption.svelte-1n46o8q{font-size:.7rem;color:#3d3a2f;text-align:center;margin-top:1.5rem;border-top:1px solid #151515;padding-top:1rem;font-style:italic;letter-spacing:.05em}.demo-tabs.svelte-1n46o8q{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem;width:100%}.demo-tabs.svelte-1n46o8q button:where(.svelte-1n46o8q){background:#0a0a0a;border:1px solid #1a1a1a;color:#5c584a;padding:.6rem 1.2rem;border-radius:6px;cursor:pointer;text-transform:uppercase;font-size:.75rem;letter-spacing:.1em;transition:all .4s cubic-bezier(.4,0,.2,1);flex:1;min-width:120px}.demo-tabs.svelte-1n46o8q button:where(.svelte-1n46o8q):hover:not(.active){border-color:#c5a02844;color:#8e7218;background:#c5a0280d}.demo-tabs.svelte-1n46o8q button.active:where(.svelte-1n46o8q){background:linear-gradient(135deg,#c5a028,#8e7218);color:#0f0f0f;font-weight:300;border-color:transparent;box-shadow:0 4px 12px #c5a02833;transform:translateY(-2px)}.pasangan-demo.svelte-1n46o8q{display:flex;align-items:center;justify-content:center;gap:2.5rem;margin-top:1.5rem;padding:2rem;background:#050505;border-radius:10px;border:1px solid #151515;flex-wrap:wrap;width:100%}.step-jav.svelte-1n46o8q{font-size:clamp(2rem,6vw,2.8rem);background:linear-gradient(180deg,#f1e5ac,#c5a028);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.demo-step.svelte-1n46o8q{display:flex;flex-direction:column;align-items:center;gap:.6rem}.demo-step.svelte-1n46o8q small:where(.svelte-1n46o8q){color:#3d3a2f;font-size:.75rem;letter-spacing:.05em}.demo-arrow.svelte-1n46o8q{color:#8e7218;font-size:1.4rem;opacity:.6}.sandhangan-grid.svelte-1n46o8q{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;margin-top:2rem;width:100%}.sand-sect.svelte-1n46o8q h5:where(.svelte-1n46o8q){color:#8e7218;margin:0 0 1.2rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;border-bottom:1px solid #1a1a1a;padding-bottom:.6rem}.sand-sect.svelte-1n46o8q ul:where(.svelte-1n46o8q){list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.8rem}.sand-sect.svelte-1n46o8q li:where(.svelte-1n46o8q){display:flex;align-items:center;gap:1rem;font-size:.85rem;color:#5c584a}.sand-sect.svelte-1n46o8q li:where(.svelte-1n46o8q) span:where(.svelte-1n46o8q){font-size:1.6rem;color:#c5a028;background:#050505;width:45px;height:45px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #151515;box-shadow:inset 0 0 10px #00000080}.rekan-tags-detailed.svelte-1n46o8q{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.2rem;margin-top:1.5rem;width:100%}.rekan-item.svelte-1n46o8q{display:flex;flex-direction:column;align-items:center;background:#080808;padding:1.5rem 1rem;border-radius:8px;border:1px solid #1a1a1a;transition:all .3s ease}.rekan-item.svelte-1n46o8q:hover{border-color:#c5a02822}.rekan-item.svelte-1n46o8q span:where(.svelte-1n46o8q){font-size:2.2rem;color:#c5a028;margin-bottom:.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.rekan-item.svelte-1n46o8q strong:where(.svelte-1n46o8q){color:#8e7218;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}.punct-grid.svelte-1n46o8q{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem;width:100%}.punct-item.svelte-1n46o8q{display:flex;align-items:center;gap:2rem;background:#080808;padding:1.5rem 2rem;border-radius:8px;border-left:2px solid #8e7218;transition:all .3s ease}.punct-item.svelte-1n46o8q:hover{background:#0c0c0c;border-left-width:4px}.p-jav.svelte-1n46o8q{font-size:2.8rem;color:#c5a028;min-width:60px;text-align:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.p-info.svelte-1n46o8q{font-size:.9rem;color:#5c584a;line-height:1.6}.p-info.svelte-1n46o8q strong:where(.svelte-1n46o8q){color:#8e7218;letter-spacing:.05em}.example-grid-detailed.svelte-1n46o8q{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:1.5rem;width:100%}.ex-detail-item.svelte-1n46o8q{background:#080808;padding:1.8rem;border-radius:12px;border:1px solid #1a1a1a;position:relative;overflow:hidden}.ex-header.svelte-1n46o8q{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;border-bottom:1px solid #151515;padding-bottom:.8rem}.ex-header.svelte-1n46o8q span:where(.svelte-1n46o8q){font-size:2.2rem;background:linear-gradient(to bottom,#f1e5ac,#c5a028);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.ex-header.svelte-1n46o8q strong:where(.svelte-1n46o8q){color:#8e7218;text-transform:uppercase;font-size:.85rem;letter-spacing:.15em;font-weight:300}.ex-detail-item.svelte-1n46o8q p:where(.svelte-1n46o8q){font-size:.8rem;color:#3d3a2f;font-family:monospace;margin:0}footer.svelte-1n46o8q{padding:4rem 0;text-align:center;color:#2a2821;font-size:.75rem;letter-spacing:.4em;text-transform:uppercase}@media(max-width:480px){.copy-btn.svelte-1n46o8q{width:100%;align-self:stretch;padding:1rem}.demo-tabs.svelte-1n46o8q button:where(.svelte-1n46o8q){min-width:100%}textarea.svelte-1n46o8q,.output-area.svelte-1n46o8q{padding:1rem}header.svelte-1n46o8q{margin-bottom:2.5rem}h1.svelte-1n46o8q{padding-bottom:.1em}}.scroll-top-btn.svelte-1n46o8q{position:fixed;bottom:2rem;left:2rem;background:#121212e6;border:1px solid #c5a028;color:#c5a028;padding:.8rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.8rem;z-index:1001;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 20px #00000080;transition:all .3s ease;text-transform:uppercase;letter-spacing:.05em;font-weight:700}.scroll-top-btn.svelte-1n46o8q:hover{background:#c5a028;color:#0f0f0f;transform:translateY(-5px)}