.modal-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;background:#000000a6}.modal{width:min(900px,90vw);padding:1.5rem;border:1px solid var(--accent);border-radius:var(--radius-lg);background:var(--bg-page);color:var(--text-secondary);text-align:left;box-shadow:var(--shadow-modal)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.modal-header h2{margin:0;color:var(--text-secondary)}.modal-header button{padding:4px 10px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all .15s ease}.modal-header button:hover{background:var(--accent);color:var(--bg-page)}.modal-content{margin:0;text-align:left;white-space:pre-wrap;word-break:break-word}.legend{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:1rem}.legend-item{display:flex;align-items:center;gap:.45rem;font-size:.95rem}.legend-box{width:.9rem;height:.9rem;border-radius:.2rem;border:1px solid var(--token-border)}.legend-box.top-level,.legend-box.statement,.legend-box.expression{background:var(--ast-legend)}.legend-box.identifier,.legend-box.numeric,.legend-box.string,.legend-box.character,.legend-box.operator{background:var(--token-border)}.identifier{--token-bg: #5a4636;--token-border: #8b6a45;--token-text: #f5e6c8}.integer,.decimal,.numeric{--token-bg: #4a3c2a;--token-border: #b8894f;--token-text: #ffd9a3}.character{--token-bg: #4b3a32;--token-border: #a56c5a;--token-text: #ffd1c2}.string{--token-bg: #3d332b;--token-border: #7a8f62;--token-text: #d8f0c2}.operator{--token-bg: #2e2a27;--token-border: #9a7b63;--token-text: #e6d3b3}.token-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}.token-line-row{display:flex;align-items:flex-start;gap:14px}.token-line-number{min-width:2ch;padding-top:10px;color:var(--text-secondary);opacity:.75;text-align:right}.token-lines{display:flex;flex-direction:column;gap:8px}.token-line{display:flex;flex-wrap:wrap;gap:10px}.token-chip{padding:10px 14px;border:1px solid var(--token-border);border-radius:var(--radius-md);background:var(--token-bg);color:var(--token-text);font-size:14px;line-height:1;box-shadow:var(--shadow-soft)}.token-chip:hover{transform:translateY(-1px);box-shadow:0 3px 6px #00000059}.top-level{--ast-bg: var(--ast-top-level-bg);--ast-text: var(--ast-top-level-text);--ast-legend: var(--ast-top-level-bg)}.statement{--ast-bg: var(--ast-statement-bg);--ast-text: #f5e6c8;--ast-legend: var(--ast-statement-bg)}.expression{--ast-bg: var(--ast-expression-bg);--ast-text: #dce9f2;--ast-legend: var(--ast-expression-bg)}.ast-tree{--ast-node-height: 28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:fit-content;overflow:visible}.ast-branch,.ast-children,.ast-child-group{position:relative;margin:0;padding-left:0;overflow:visible}.ast-child-section{display:flex;flex-direction:column;gap:6px}.ast-for-header{display:flex;align-items:center;gap:8px;margin-left:8px}.ast-for-control{display:flex;flex-direction:column;gap:4px}.ast-for-line{display:flex;align-items:center;gap:6px}.ast-for-semi{opacity:.6}.ast-section-label{margin-left:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.65}.ast-branch{display:flex;flex-direction:column;gap:6px;width:fit-content}.ast-branch:hover{z-index:5000}.ast-branch-source{background:transparent;padding:0}.ast-branch-top-level{background:var(--ast-top-level-bg);border-radius:var(--radius-md);padding:12px}.ast-branch-top-level.clickable{cursor:pointer;box-shadow:0 1px 2px #00000059;transition:box-shadow .12s ease,filter .12s ease}.ast-branch-top-level.clickable:hover{box-shadow:0 4px 10px #00000073;filter:brightness(1.05)}.ast-branch-top-level.clickable:active{box-shadow:0 1px 3px #00000059}.ast-branch-top-level>.ast-node.top-level{background:transparent;padding:0;min-height:var(--ast-node-height)}.ast-children{display:flex;flex-direction:column;margin-top:6px;margin-left:16px;gap:6px}.ast-inline-children{margin-left:10px}.ast-inline-list{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.ast-node,.ast-inline-node{position:relative;display:inline-flex;align-items:center;background:var(--ast-bg);color:var(--ast-text);line-height:1}.ast-node{gap:8px;padding:4px 8px;min-height:var(--ast-node-height);border-radius:var(--radius-sm)}.ast-node-source{background:transparent;box-shadow:none}.ast-inline-node{gap:6px;padding:0 6px;align-self:stretch;border-radius:4px}.ast-node.clickable{box-shadow:0 1px 2px #00000059;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.ast-node.clickable.collapsed{cursor:zoom-in}.ast-node.clickable.expanded{cursor:zoom-out}.ast-node.clickable:hover{transform:translateY(-1px);box-shadow:0 4px 10px #00000073;filter:brightness(1.08)}.ast-node.clickable:active{transform:translateY(0);box-shadow:0 1px 3px #00000059}.ast-caret{display:inline-flex;align-items:center;justify-content:center;width:12px;margin-right:6px;font-size:11px;line-height:1;opacity:.7;transform:rotate(0);transform-origin:center;transition:transform .12s ease,opacity .12s ease}.ast-node.clickable.collapsed>.ast-caret{transform:rotate(0)}.ast-node.clickable.expanded>.ast-caret{transform:rotate(90deg)}.ast-branch.clickable.collapsed>.ast-node>.ast-caret{transform:rotate(0)}.ast-branch.clickable.expanded>.ast-node>.ast-caret{transform:rotate(90deg)}.ast-label,.ast-paren,.ast-inline-group{display:inline-flex;align-items:center;line-height:1}.ast-label{gap:8px}.ast-paren{justify-content:center;margin:0 2px;opacity:.7}.ast-equals{margin:0 4px;opacity:.6}.ast-kind{font-weight:700;cursor:help}.ast-kind:after{content:":";margin-right:4px;opacity:.7}.ast-chip{padding:1px 6px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);background:#ffffff14;font-size:11px}.ast-kind-wrapper{position:relative;display:inline-flex;align-items:center}.ast-tooltip{position:absolute;bottom:calc(100% + 8px);left:0;z-index:6000;min-width:320px;max-width:520px;padding:10px 12px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--bg-page);color:var(--text-secondary);box-shadow:var(--shadow-modal);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.ast-kind-wrapper:hover .ast-tooltip{opacity:1;transform:translateY(0)}.ast-tooltip pre{margin:0;white-space:pre;font-family:var(--font-mono);font-size:12px;line-height:1.35}.app{width:100%;max-width:1400px;height:100vh;box-sizing:border-box;margin:0 auto;padding:20px 40px;display:flex;flex-direction:column;text-align:center}.title{margin-bottom:30px;color:var(--text-primary);font-size:22px;letter-spacing:1px}.error{margin-top:20px;color:var(--text-error)}.editor-container{display:flex;justify-content:center;gap:24px;flex:1;min-height:0}.editor{flex:1;min-width:0;min-height:400px;height:100%;padding:14px;border:1px solid var(--editor-border);border-radius:var(--radius-sm);background:var(--bg-editor);color:var(--text-primary);font-size:14px;box-shadow:var(--shadow-panel);resize:none;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg-editor);white-space:pre;overflow-x:auto;overflow-y:auto;line-height:1.5;tab-size:4}.editor-left{border:none;border-radius:0;box-shadow:none}.editor-wrapper{display:flex;flex:1;min-width:0;min-height:0;background:var(--bg-editor);border:1px solid var(--editor-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-panel);overflow:hidden}.editor-wrapper .editor{flex:1;min-width:0;border:none;border-radius:0;box-shadow:none}.editor-wrapper textarea{flex:1}.line-numbers{width:48px;padding:14px 8px;text-align:right;color:var(--text-secondary);background:#00000014;border-right:1px solid var(--editor-border);font-size:14px;line-height:1.5;-webkit-user-select:none;user-select:none;overflow:hidden;box-sizing:border-box;flex:0 0 48px}.line-numbers div{height:21px}.editor:focus{outline:none;border-color:var(--accent-bright)}.editor::-webkit-scrollbar{width:10px}.editor::-webkit-scrollbar-track{background:var(--bg-editor)}.editor::-webkit-scrollbar-thumb{background:var(--accent);border-radius:var(--radius-sm)}.editor::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}.output{background:var(--bg-output)}.button-row{display:flex;justify-content:center;gap:16px;margin-top:28px}.compile-button{padding:10px 22px;border:1px solid var(--accent-bright);border-radius:var(--radius-pill);background:transparent;color:var(--text-primary);font-family:inherit;font-size:14px;cursor:pointer;transition:all .2s ease}.compile-button:hover{background:var(--accent-bright);color:var(--bg-page)}:root{--bg-page: #1b1b1b;--bg-editor: #3b322c;--bg-output: #2a2420;--text-primary: #f5e6c8;--text-secondary: #d7c3a1;--text-base: #e6d3b3;--text-error: #ff8a8a;--accent: #8b6a45;--accent-hover: #b18a5a;--accent-bright: #c89b6d;--editor-border: #5a3e2b;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 20px;--shadow-soft: 0 4px 12px rgba(0, 0, 0, .18);--shadow-panel: 0 0 20px rgba(0, 0, 0, .45);--shadow-modal: 0 20px 60px rgba(0, 0, 0, .5);--ast-top-level-bg: #3a2d24;--ast-top-level-text: #f5e6c8;--ast-statement-bg: #4a382c;--ast-expression-bg: #2f3d46;--font-mono: "JetBrains Mono", monospace}html,body,#root{height:100%}body{margin:0;min-height:100vh;background:var(--bg-page);color:var(--text-base);font-family:var(--font-mono);overflow:hidden}body::-webkit-scrollbar{width:10px}body::-webkit-scrollbar-track{background:var(--bg-page)}body::-webkit-scrollbar-thumb{background:var(--accent);border-radius:var(--radius-sm)}body::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}