:root { --green:#75f59e; --deep:#07110b; --panel:#0c1911; --line:#214c31; --text:#effff4; --muted:#9bb7a4; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--deep); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
body { padding:22px 28px 38px; }
.hyrule-app { width:100%; max-width:1540px; margin:0 auto; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 28px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(125deg,#102719,#09130d); }
.tag { color:var(--green); font:700 12px/1 ui-monospace,monospace; letter-spacing:.16em; }
.hero h1 { margin:8px 0 6px; color:#f4fff7; font-size:clamp(30px,4vw,54px); letter-spacing:-.045em; line-height:1; }
.author { display:inline-block; margin-bottom:8px; color:var(--green); font:700 12px/1 ui-monospace,monospace; text-decoration:none; }
.author:hover { text-decoration:underline; }
.hero p { margin:0; color:var(--muted); font-size:15px; }
.project-links { display:flex; align-items:center; gap:8px; margin-top:14px; font:700 10px/1 ui-monospace,monospace; letter-spacing:.08em; }
.project-links span { margin-right:4px; color:#789883; }
.project-links a { display:inline-flex; align-items:center; justify-content:center; min-width:112px; height:32px; padding:0 12px; border:1px solid #326e46; border-radius:6px; color:var(--green); background:#11251a; text-decoration:none; }
.project-links a:hover { border-color:var(--green); background:#193523; }
.live-pill { flex:none; padding:10px 14px; border:1px solid #2b6841; border-radius:999px; color:var(--green); background:#10291a; font:700 11px/1 ui-monospace,monospace; }
.sim-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; margin-top:18px; }
.screen-card,.controls-card { border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.screen-card { padding:14px; min-width:0; }
#sim-canvas { display:block; width:100%; height:min(73vh,760px); object-fit:contain; border-radius:12px; background:#020503; }
.hud { display:flex; justify-content:space-between; gap:16px; padding:12px 4px 1px; color:var(--green); font:600 12px/1.4 ui-monospace,monospace; }
.controls-card { padding:16px; }
.sample-row { display:grid; grid-template-columns:56px 1fr 56px; align-items:center; gap:8px; text-align:center; }
button { border:1px solid #326e46; background:#11251a; color:#e6ffed; box-shadow:none; cursor:pointer; }
button:hover { border-color:var(--green); background:#193523; }
.sample-row button { height:34px; border-radius:8px; font:700 10px/1 ui-monospace,monospace; }
.sample-row strong { color:#f1fff5; font:700 13px/1 ui-monospace,monospace; }
.reset-button { width:100%; height:38px; margin-top:10px; border-radius:9px; color:var(--green); font:700 12px/1 ui-monospace,monospace; }
.wasd { display:grid; grid-template-columns:repeat(3,58px); grid-template-rows:repeat(2,52px); justify-content:center; gap:8px; margin:24px 0 18px; }
.key { min-width:58px; height:52px; border-radius:9px; font:800 17px/1 ui-monospace,monospace; touch-action:none; }
.key-w { grid-column:2; }.key-a { grid-column:1;grid-row:2;}.key-s { grid-column:2;grid-row:2;}.key-d { grid-column:3;grid-row:2; }
.key.active { background:#2b7546; border-color:var(--green); transform:translateY(1px); }
.stick { display:grid; place-items:center; width:150px; height:150px; margin:0 auto 12px; border:1px solid #326848; border-radius:50%; background:radial-gradient(circle,#173522 0 31%,#09150d 33% 100%); touch-action:none; }
.stick-knob { width:56px; height:56px; border-radius:50%; background:var(--green); box-shadow:0 0 30px #4fe58555; }
.input-readout { min-height:34px; text-align:center; color:#add2b8; font:600 11px/1.5 ui-monospace,monospace; }
.help { margin-top:14px; padding-top:14px; border-top:1px solid #1c3d28; text-align:center; color:#789883; font-size:11px; }
@media(max-width:900px){body{padding:10px}.hero{padding:18px}.live-pill{display:none}.project-links{flex-wrap:wrap}.sim-grid{grid-template-columns:1fr}.controls-card{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sample-row,.reset-button,.help{grid-column:1/-1}.wasd{margin:10px auto}.stick{margin:4px auto}.hud{font-size:10px}#sim-canvas{height:auto}}