@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101315;--panel:#171b1e;--line:#2b3033;--muted:#929b9f;--text:#edf1ef;--mint:#b4f5ce;--orange:#f4aa7b;--sans:'DM Sans',sans-serif;--display:'Space Grotesk',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{transition:background .18s,color .18s}button:hover{color:white}a{color:inherit}header{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 4.2%}.brand{display:flex;align-items:center;text-decoration:none;font:600 32px var(--display);letter-spacing:-1.8px}.brand svg{width:27px;height:34px;margin-right:13px;fill:var(--bg);stroke:var(--mint);stroke-width:2}.brand-dot{color:var(--mint)}.header-label{font-size:12px;color:var(--muted);letter-spacing:2px;border-left:1px solid var(--line);padding-left:28px}header>.text-button{margin-left:auto}.text-button{background:none;border:0;font-size:14px;padding:9px 0;color:#c4ccca;display:inline-flex;gap:18px;align-items:center}.text-button span{font-size:19px}.text-button:hover{color:var(--mint)}main{max-width:1600px;margin:auto;padding:38px 4.2% 0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.6px;color:var(--muted)}.eyebrow span{padding:0 10px;color:#5b666b}h1{font-family:var(--display);font-weight:500;font-size:clamp(25px,2.65vw,40px);letter-spacing:-1.6px;margin:12px 0 8px}p{line-height:1.6}.page-heading p{color:var(--muted);margin:0;font-size:15px}.live-tag{font-size:12px;color:#b7c2bb;display:flex;gap:9px;align-items:center;background:#1c2721;padding:9px 12px;border:1px solid #2b3d30;border-radius:5px}.live-tag i{height:6px;width:6px;background:var(--mint);border-radius:50%}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 318px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.sim-panel{position:relative;min-width:0;background:#14191b;display:flex;flex-direction:column}.sim-top{position:absolute;top:22px;left:24px;right:22px;display:flex;justify-content:space-between;align-items:center;z-index:1}.segmented{padding:4px;border:1px solid #343b3b;border-radius:8px;background:#111618;display:flex;gap:2px}.segmented button{padding:10px 17px;border:0;background:none;color:var(--muted);border-radius:5px;font-size:14px}.segmented button.active{background:#303936;color:#e9f7ed}.icon-button{background:none;border:1px solid #343c3d;border-radius:7px;width:38px;height:38px;font-size:24px;color:#b5bfbd;display:inline-grid;place-items:center}.icon-button:hover{background:#303b37}.canvas-wrap{position:relative;min-height:540px;flex:1;overflow:hidden}#pendulum{position:absolute;width:100%;height:100%;display:block}.canvas-meta{position:absolute;top:99px;left:29px;pointer-events:none}.label-tiny{font-size:11px;letter-spacing:1.7px;color:#7e8e8f}.canvas-meta strong{display:block;font:400 28px var(--display);margin-top:6px;font-variant-numeric:tabular-nums}.canvas-meta small{font-size:15px;color:var(--muted)}.canvas-key{position:absolute;right:25px;bottom:48px;font-size:12px;color:#a5b1ad;display:flex;gap:16px}.canvas-key span{display:flex;gap:7px;align-items:center}i.mint,i.orange,i.muted-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}.mint{background:var(--mint)}.orange{background:var(--orange)}.muted-dot{background:#46584e}.stage-note{position:absolute;bottom:20px;left:29px;right:20px;font-size:12px;color:#768781}.playbar{min-height:74px;border-top:1px solid var(--line);padding:14px 23px;display:flex;align-items:center;gap:12px;background:#171d1f}.play-button{background:var(--mint);color:#14271b;border:0;border-radius:7px;padding:11px 19px;font-size:16px;display:flex;gap:10px;min-width:116px;justify-content:center;font-weight:600}.play-button:hover{background:#d3ffe3;color:#102719}.speed-control{display:flex;align-items:center;gap:10px;margin-left:5px;font-size:13px;color:var(--muted)}select{cursor:pointer;border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--text);background:#1c2225}.keyboard-hint{margin-left:auto;color:#6f7c7d;font-size:12px}kbd{font:11px var(--sans);border:1px solid #3a4344;padding:3px 5px;border-radius:4px;margin-right:4px}.playbar>.text-button{margin-left:auto;font-size:12px}.settings{padding:25px 25px 19px;background:var(--panel);border-left:1px solid var(--line)}.settings-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}h2{font-size:15px;margin:0;font-weight:550}.settings-title>span{font-size:11px;color:#6c777b}.field-label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.preset{width:100%;height:40px;font-size:14px;background:#22282b;border-color:#394145}.param-group{padding:22px 0 0}.group-label{font-size:10px;letter-spacing:1.4px;color:#abb8b4;display:flex;align-items:center;gap:8px;margin-bottom:17px}.group-label>span{margin-left:auto;color:#657570}.range-field{margin:0 0 15px}.range-field label{display:flex;justify-content:space-between;font-size:13px;color:#9fa9aa;margin-bottom:7px}.range-field output{color:#e0e8e4;font-family:var(--display);font-size:13px;font-variant-numeric:tabular-nums}input[type=range]{display:block;appearance:none;background:linear-gradient(to right,#9fb9ac 0%,#9fb9ac var(--fill,50%),#343d3c var(--fill,50%),#343d3c 100%);width:100%;height:3px;margin:9px 0 18px;cursor:pointer;border-radius:8px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#d3e6db;border:2px solid #b1c4b9;box-shadow:0 0 0 4px #d3e6db08}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#d3e6db;border:0}.environment{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;font-size:12px;color:#a8b1b2}.environment small{color:#707d81}.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#a8b1b2;margin-top:16px}.toggle-row input{appearance:none;width:31px;height:18px;border-radius:20px;background:#3c4642;position:relative;cursor:pointer;margin:0}.toggle-row input:after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#17241d;left:3px;top:3px;transition:transform .15s}.toggle-row input:checked{background:var(--mint)}.toggle-row input:checked:after{transform:translateX(13px)}.settings-note{font-size:11px;color:#6f7a7e;margin:17px 0 0}.readouts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:17px;margin-top:19px}.data-card{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:21px 23px;min-width:0}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-head h2{font-size:14px}.micro-tag{font-size:9px;letter-spacing:.7px;color:#8d9c91}.energy-number{font:400 32px var(--display);margin:23px 0 15px;font-variant-numeric:tabular-nums}.energy-number small{font:12px var(--sans);color:var(--muted);margin-left:9px}.energy-bar{height:5px;border-radius:4px;background:#46584e;overflow:hidden}.energy-bar span{height:100%;display:block;background:var(--mint);width:0;transition:width .1s}.energy-legend{display:flex;justify-content:space-between;margin:13px 0 19px;font-size:11px;color:#899994;gap:10px}.energy-legend span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.energy-legend b{font-weight:400;color:#d0dcd5;font-variant-numeric:tabular-nums}.data-foot{font-size:11px;color:#7b8b86;display:flex;justify-content:space-between;margin:14px 0 0}.axis-label{font:13px var(--display);color:#84958c}#phase{width:100%;height:136px;display:block;margin-top:5px}.insight-icon{font-size:25px;color:var(--mint)}.insight-card{background:linear-gradient(125deg,#202c25,#18201d);border-color:#34443a}.insight-card>p{font-size:14px;line-height:1.7;color:#a4b3aa;margin:16px 0 13px}.accent{color:var(--mint);font-size:13px}.divergence{border-top:1px solid #3a4d3f;padding-top:12px;font-size:11px;display:flex;justify-content:space-between;gap:10px;color:#98ac9e}.divergence strong{font-size:15px;color:var(--orange);font-family:var(--display);white-space:nowrap}footer{display:flex;justify-content:space-between;padding:26px 0;color:#6e7b7c;font-size:10px;letter-spacing:1px}footer>span:last-child{letter-spacing:0}footer button{background:none;border:0;color:#9faeaa;padding:0;font-size:11px}dialog{background:#1c2323;border:1px solid #49564d;border-radius:15px;color:var(--text);width:min(620px,92vw);padding:40px;max-height:85vh;box-shadow:0 25px 120px #0009}dialog::backdrop{background:#040808bb;backdrop-filter:blur(5px)}dialog h2{font:500 30px/1.25 var(--display);margin:16px 0 22px;letter-spacing:-1px}dialog h3{font-size:16px;color:var(--mint);margin-top:24px}dialog p{font-size:15px;color:#b1beb6}dialog a{font-size:14px;color:var(--mint)}.dialog-close{position:absolute;right:15px;top:15px}.sim-panel:fullscreen{background:var(--bg);height:100vh}.sim-panel:fullscreen .canvas-wrap{min-height:0}[hidden]{display:none!important}@media(min-width:1500px){.canvas-wrap{min-height:600px}.settings{padding-top:30px}.range-field{margin-bottom:21px}}@media(max-width:1100px){.keyboard-hint{display:none}.workspace{grid-template-columns:minmax(0,1fr) 290px}.settings{padding:23px 20px}.micro-tag{display:none}.live-tag{display:none}.playbar{padding:14px}.speed-control label{display:none}.sim-top{left:18px;right:18px}.segmented button{padding:9px 12px}.energy-legend{flex-direction:column;gap:9px}}@media(max-width:760px){header{height:73px;padding:0 5%}.header-label{display:none}.brand{font-size:29px}main{padding:27px 5% 0}h1{font-size:30px;line-height:1.18;letter-spacing:-1px}.page-heading{margin-bottom:23px}.eyebrow{font-size:10px}.workspace{grid-template-columns:1fr}.canvas-wrap{min-height:475px}.settings{border-left:0;border-top:1px solid var(--line);padding:25px}.settings-title h2{font-size:17px}.settings-title>span{font-size:12px}.settings label,.field-label,.environment,.toggle-row{font-size:14px}.group-label{font-size:12px}.range-field output{font-size:14px}input[type=range]{height:4px;margin:16px 0 25px}input[type=range]::-webkit-slider-thumb{width:17px;height:17px}.readouts{grid-template-columns:1fr}.data-card{padding:23px}.energy-legend{flex-direction:row}.card-head h2{font-size:16px}.insight-card>p{font-size:16px}.canvas-meta{left:23px;top:91px}.canvas-key{right:18px;bottom:50px}.playbar{gap:8px;padding:13px}.play-button{min-width:95px;padding:10px 13px;font-size:14px}.playbar>.text-button{font-size:11px}.speed-control{margin-left:0}.speed-control select{padding:8px 3px;font-size:12px}.stage-note{left:20px;font-size:11px}.segmented button{font-size:13px}.canvas-wrap{min-height:440px}footer{flex-direction:column;gap:12px;line-height:1.8}.settings-note{font-size:12px}dialog{padding:30px 24px}dialog h2{font-size:27px}#phase{height:160px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Control labels remain legible at desktop and enlarged text sizes. */
.range-field label,.range-field output,.environment,.toggle-row,.field-label{font-size:14px}.group-label,.settings-note,.label-tiny,.micro-tag,.settings-title>span{font-size:12px}.playbar>.text-button{font-size:14px}.speed-control{font-size:14px}.keyboard-hint{display:none}.energy-legend,.data-foot{font-size:12px}footer{font-size:12px}footer button{font-size:12px}@media(max-width:760px){.playbar>.text-button{font-size:12px}.speed-control{font-size:12px}.playbar{flex-wrap:wrap}.canvas-wrap{min-height:460px}}

/* Official The Tall Guy branding. */
.brand .brand-logo{display:block;width:54px;height:54px;object-fit:contain;border-radius:7px;margin-right:14px;flex-shrink:0}
@media(max-width:760px){header{gap:12px}.brand .brand-logo{width:44px;height:44px;margin-right:10px}header>.text-button{font-size:13px;gap:7px}}
@media(max-width:360px){.brand{font-size:25px;letter-spacing:-1.3px}.brand .brand-logo{width:40px;height:40px;margin-right:8px}header>.text-button{font-size:12px}}