:root{--bg-deep: #050505;--bg-surface: #0f172a;--bg-card: rgba(30, 41, 59, .7);--border: #1e293b;--accent-cyan: #00f2ff;--accent-purple: #a855f7;--text-main: #f1f5f9;--text-muted: #94a3b8;--shadow-glow: 0 0 20px rgba(0, 242, 255, .15);--font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-header: "Orbitron", sans-serif;--font-mono: "Fira Code", "SFMono-Regular", Consolas, monospace;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-main);display:flex;height:100vh;overflow:hidden;background-color:var(--bg-deep);color:var(--text-main)}#sidebar{width:280px;background-color:var(--bg-surface);color:var(--text-main);display:flex;flex-direction:column;border-right:1px solid var(--border);z-index:100;transition:var(--transition)}#sidebar.collapsed{width:60px}#sidebar.collapsed #sidebar-header{padding:15px 0;justify-content:center}#sidebar.collapsed #sidebar-actions{flex-direction:column;gap:20px;align-items:center}#sidebar.collapsed .sidebar-icon-button{display:flex}#sidebar.collapsed #sidebar-title,#sidebar.collapsed ul{display:none}#sidebar-header{padding:24px 20px;background-color:#0f172acc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}#sidebar-header h2{margin:0;font-family:var(--font-header);font-weight:700;font-size:1.1rem;letter-spacing:1px;color:var(--accent-cyan)}#sidebar-actions{display:flex;align-items:center;gap:10px}.sidebar-icon-button{display:none;background:none;border:none;color:var(--accent-cyan);cursor:pointer;font-size:1.1rem;transition:var(--transition);width:32px;height:32px;align-items:center;justify-content:center;text-decoration:none}.sidebar-icon-button:hover{color:var(--text-main);transform:scale(1.1)}#sidebar-toggle{background:none;border:none;color:var(--accent-cyan);cursor:pointer;font-size:1.2rem}#sidebar:not(.collapsed) #sidebar-toggle{display:block}#sidebar:not(.collapsed) .sidebar-icon-button:not(#sidebar-toggle){display:none}#sidebar ul{list-style-type:none;padding:10px 0;margin:0;flex-grow:1;overflow-y:auto}#sidebar ul::-webkit-scrollbar{width:4px}#sidebar ul::-webkit-scrollbar-track{background:transparent}#sidebar ul::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:2px}#sidebar li.example,.sidebar-link{padding:12px 20px;cursor:pointer;transition:var(--transition);font-size:.9rem;color:var(--text-muted);border-left:2px solid transparent;display:block;text-decoration:none}#sidebar li.example.selected,.sidebar-link.active{background:linear-gradient(to right,rgba(0,242,255,.1),transparent);color:var(--accent-cyan);border-left:2px solid var(--accent-cyan)}#sidebar li.example:hover:not(.selected),.sidebar-link:hover:not(.active){background-color:#ffffff0d;color:var(--text-main)}#sidebar li.section{padding:20px 20px 8px;color:var(--accent-purple);font-family:var(--font-header);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:2px;opacity:.8}#main{flex-grow:1;display:flex;flex-direction:column;background-color:var(--bg-deep);position:relative;overflow-y:auto}#main-header{padding:16px 30px;background-color:#050505cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.header-left{display:flex;align-items:center;gap:20px}.header-right{display:flex;gap:12px}.home-link{color:var(--accent-cyan);text-decoration:none;font-size:.75rem;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:6px;border:1px solid var(--border);transition:var(--transition);font-family:var(--font-header);text-transform:uppercase;letter-spacing:1.5px;background:#0f172a80}.home-link i{font-size:1rem}.home-link:hover{background-color:#00f2ff1a;border-color:var(--accent-cyan);box-shadow:0 0 15px #00f2ff33;color:var(--accent-cyan);transform:translate(-3px)}.home-link span{display:inline-block}@media(max-width:600px){.home-link span{display:none}.home-link{padding:8px;width:36px;height:36px;justify-content:center}}#main-header h1{margin:0;font-family:var(--font-header);font-size:1.4rem;font-weight:700;color:var(--text-main);letter-spacing:1px}#content{flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:40px 20px;width:100%}#canvas-container{position:relative;margin-bottom:40px;border-radius:4px;overflow:hidden;border:1px solid var(--border);background-color:#000;box-shadow:0 0 40px #00000080;width:100%;max-width:1000px;aspect-ratio:1 / 1;flex-shrink:0}#canvas-container:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;opacity:.2}#debug-canvas{display:block;width:100%;height:100%;position:relative;z-index:1}#metrics{position:fixed;top:100px;right:30px;background-color:#0f172ab3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);color:var(--accent-cyan);padding:16px;border-radius:4px;font-family:var(--font-mono);font-size:.8rem;z-index:1000;box-shadow:var(--shadow-glow);min-width:180px}#metrics:before{content:"DIAGNOSTICS";display:block;font-family:var(--font-header);font-size:.6rem;letter-spacing:2px;margin-bottom:10px;opacity:.5;border-bottom:1px solid var(--border);padding-bottom:5px}#metrics div{margin:8px 0;display:flex;align-items:center;justify-content:space-between}#metrics div i{font-size:.9rem;margin-right:10px;opacity:.8}#description{max-width:1000px;width:100%;margin-bottom:40px;padding:24px;background-color:var(--bg-surface);border-left:4px solid var(--accent-purple);border-radius:4px;line-height:1.7;color:var(--text-muted);font-size:1rem;flex-shrink:0}#description p{margin-bottom:16px}#description p:last-child{margin-bottom:0}#description ul,#description ol{margin-bottom:16px;padding-left:24px}#description li{margin-bottom:8px}#description li:last-child{margin-bottom:0}#description h1,#description h2,#description h3,#description h4,#description h5,#description h6{color:var(--text-main);margin:24px 0 12px;font-family:var(--font-header)}#description h1:first-child,#description h2:first-child,#description h3:first-child{margin-top:0}#description code{background-color:#ffffff1a;padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.9em;color:var(--accent-cyan)}#description strong{color:var(--text-main)}#code-container{max-width:1000px;width:100%;margin-bottom:60px;flex-shrink:0}#code-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background-color:var(--bg-surface);border-top-left-radius:8px;border-top-right-radius:8px;border:1px solid var(--border);border-bottom:none}#code-header-title{font-family:var(--font-header);font-weight:700;font-size:.9rem;letter-spacing:1px;color:var(--text-main)}#toggle-code{background:none;border:1px solid var(--border);color:var(--text-muted);padding:6px 12px;border-radius:4px;cursor:pointer;font-family:var(--font-header);font-size:.7rem;text-transform:uppercase;transition:var(--transition);display:flex;align-items:center}#toggle-code:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}#toggle-code i{margin-left:8px}#code-tabs{display:flex;justify-content:space-between;align-items:center;background-color:#1e293b80;border-left:1px solid var(--border);border-right:1px solid var(--border)}.code-tabs-left{display:flex}#copy-code{margin-right:15px;background:none;border:1px solid var(--border);color:var(--text-muted);padding:6px 12px;border-radius:4px;cursor:pointer;font-family:var(--font-header);font-size:.7rem;text-transform:uppercase;transition:var(--transition);display:flex;align-items:center;gap:8px}#copy-code:hover{border-color:var(--accent-cyan);color:var(--accent-cyan)}#copy-code.success{color:#4f4;border-color:#4f4}.code-tab{padding:12px 24px;background:transparent;color:var(--text-muted);cursor:pointer;border:none;font-family:var(--font-header);font-size:.75rem;text-transform:uppercase;letter-spacing:1px;transition:var(--transition);border-bottom:2px solid transparent}.code-tab.active{color:var(--accent-cyan);border-bottom:2px solid var(--accent-cyan);background:#00f2ff0d}.code-tab:hover:not(.active){color:var(--text-main);background:#ffffff0d}#code-section{background-color:#0d1117;border-bottom-left-radius:8px;border-bottom-right-radius:8px;overflow:hidden;border:1px solid var(--border)}.code-panel{display:none;padding:24px}.code-panel.active{display:block}.code-panel pre{margin:0;padding:0;font-family:var(--font-mono);font-size:.95rem;color:#c9d1d9;overflow-x:auto;line-height:1.6;tab-size:4;-moz-tab-size:4}#info-toggle{background-color:transparent;color:var(--accent-purple);border:1px solid var(--accent-purple);border-radius:4px;padding:8px 16px;cursor:pointer;font-family:var(--font-header);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;display:none;align-items:center;transition:var(--transition)}#info-toggle:hover{background-color:var(--accent-purple);color:var(--text-main);box-shadow:0 0 15px #a855f766}#info-toggle i{margin-right:8px}#reset-button{background-color:transparent;color:var(--accent-cyan);border:1px solid var(--accent-cyan);border-radius:4px;padding:8px 16px;cursor:pointer;font-family:var(--font-header);font-size:.8rem;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;transition:var(--transition)}#reset-button:hover{background-color:var(--accent-cyan);color:var(--bg-deep);box-shadow:0 0 15px #00f2ff66}#reset-button i{margin-right:8px}@media(max-width:768px),(max-width:1024px)and (orientation:landscape){body.info-mode #canvas-container,body.info-mode #metrics{display:none!important}body:not(.info-mode) #description,body:not(.info-mode) #code-container{display:none!important}}@media(max-width:768px){body{flex-direction:column}#sidebar{width:100%;height:auto;max-height:50vh;border-right:none;border-bottom:1px solid var(--border)}#sidebar.collapsed{width:100%;height:70px;max-height:70px}#sidebar #sidebar-header{flex-direction:row;padding:0 15px;height:70px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}#sidebar.collapsed #sidebar-header{justify-content:flex-end;padding:0 15px}#sidebar-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center}#sidebar.collapsed #sidebar-actions{flex-direction:row;gap:10px}#sidebar.collapsed .sidebar-icon-button{display:none}#sidebar-toggle{display:block}#sidebar.collapsed ul{display:none}#sidebar-title{flex-grow:1}#main-header{padding:12px 15px}#main-header h1{font-size:1.1rem}#info-toggle{display:flex}.button-text{display:none}#reset-button{padding:8px}#reset-button i{margin-right:0}#content{padding:10px;height:calc(100vh - 135px);overflow-y:auto}#canvas-container{width:100%;height:100%;aspect-ratio:auto;margin-bottom:0;max-width:100%;max-height:100%}#debug-canvas{width:100%;height:100%}#metrics{position:fixed;top:auto;bottom:20px;right:20px;padding:10px;font-size:.7rem;pointer-events:none;opacity:.8;min-width:140px}#description,#code-container{margin-bottom:20px;max-width:100%}#description{padding:15px}}@media(min-width:769px){#sidebar.collapsed~#main #main-header{display:none}#sidebar.collapsed~#main #content{height:100vh}}@media(max-width:1024px)and (orientation:landscape){body{flex-direction:row}#main-header{display:none}#sidebar{width:60px;height:100vh;max-height:100vh;border-right:1px solid var(--border);border-bottom:none}#sidebar-header{flex-direction:column;padding:15px 0;gap:20px;border-bottom:none}#sidebar-title{display:none}#sidebar-actions{flex-direction:column;gap:20px}.sidebar-icon-button{display:flex}#sidebar-toggle{order:-1}#sidebar.collapsed{width:60px}#sidebar:not(.collapsed){width:280px}#sidebar:not(.collapsed) #sidebar-title{display:block;font-size:.8rem;text-align:center}#sidebar:not(.collapsed) #sidebar-header{padding:24px 20px;flex-direction:row}#sidebar:not(.collapsed) #sidebar-actions{flex-direction:row}#main{height:100vh}#content{padding:10px;height:100vh;justify-content:center}body.info-mode #content{height:auto;min-height:100vh;justify-content:flex-start;padding:20px}#canvas-container{margin-bottom:0;height:100%;width:100%;aspect-ratio:auto}#debug-canvas{height:100%;width:100%}#metrics{top:auto;bottom:20px;right:20px;padding:10px;font-size:.7rem;pointer-events:none;opacity:.8;min-width:140px}#description{padding:15px}}