:root{--bg-primary:#1e1e2e;--bg-secondary:#282a36;--bg-tertiary:#44475a;--text-primary:#f8f8f2;--text-secondary:#b6b6b6;--accent:#50fa7b;--accent-hover:#39e64d;--border-color:#44475a;--error:#f55;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--font-family-primary:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;--font-family-mono:"Courier New",Courier,monospace;--font-size-sm:12px;--font-size-base:14px;--font-size-md:16px;--font-size-lg:18px;--font-size-xl:24px;--transition-fast:150ms ease-in-out;--transition-normal:300ms ease-in-out;--touch-target-min:44px;--mobile:480px;--tablet:768px;--desktop:1200px}*{box-sizing:border-box;margin:0;padding:0}#root,body,html{height:100%;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background-color:#1e1e2e;background-color:var(--bg-primary);color:#f8f8f2;color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-family:var(--font-family-primary);font-size:14px;font-size:var(--font-size-base);line-height:1.6;overflow-x:hidden;-webkit-user-select:none}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#1e1e2e;background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#44475a;background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#50fa7b;background:var(--accent)}.app-container{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);display:flex;height:100vh;overflow:hidden;width:100%}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;padding:var(--spacing-lg) 0;width:280px}.sidebar-header{border-bottom:2px solid var(--accent);margin-bottom:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg)}.sidebar-title{color:var(--accent);font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--spacing-sm)}.sidebar-links{color:var(--text-secondary);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-sm);padding:0 var(--spacing-md)}.sidebar-links a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}.sidebar-links a:hover{color:var(--accent-hover)}.experiment-list{flex:1 1;gap:var(--spacing-sm);overflow-y:auto;padding:0 var(--spacing-md)}.experiment-item,.experiment-list{display:flex;flex-direction:column}.experiment-item{background-color:var(--bg-tertiary);border:2px solid #0000;border-radius:4px;cursor:pointer;justify-content:center;max-height:120px;min-height:44px;overflow:hidden;padding:var(--spacing-md);text-align:left;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.experiment-item:hover{background-color:#50fa7b1a;border-color:var(--accent)}.experiment-item.active{background-color:#50fa7b33;border-color:var(--accent);font-weight:700}.experiment-number{color:var(--accent);font-size:var(--font-size-sm);font-weight:700;margin-bottom:var(--spacing-xs)}.experiment-name{color:var(--text-primary);font-size:var(--font-size-md);font-weight:600;margin-bottom:var(--spacing-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.experiment-desc{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--text-secondary);display:-webkit-box;font-size:var(--font-size-sm);line-height:1.4;margin-bottom:var(--spacing-sm);overflow:hidden}.experiment-concepts{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.concept-tag{background-color:#50fa7b26;border-radius:2px;color:var(--accent);display:inline-block;font-size:var(--font-size-sm);max-width:100%;overflow:hidden;padding:var(--spacing-xs) var(--spacing-sm);text-overflow:ellipsis;white-space:nowrap}.content-area{display:flex;flex:1 1;flex-direction:column;min-width:0;overflow:hidden}.content-header{align-items:center;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:var(--spacing-lg)}.header-title{color:var(--text-primary);font-size:var(--font-size-lg);font-weight:700}.header-number{color:var(--accent);font-size:var(--font-size-md);font-weight:700}.experiment-panels{grid-gap:0;display:grid;flex:1 1;gap:0;grid-template-columns:1fr 1fr;min-width:0;overflow:hidden}.code-panel{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.code-header{align-items:center;background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);display:flex;gap:var(--spacing-md);justify-content:space-between;padding:var(--spacing-md)}.file-selector{appearance:none;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:2px;color:var(--text-primary);cursor:pointer;flex:1 1;font-size:var(--font-size-sm);min-height:44px;padding:var(--spacing-sm) var(--spacing-md);transition:border-color var(--transition-fast)}.file-selector:focus,.file-selector:hover{border-color:var(--accent)}.file-selector:focus{box-shadow:0 0 0 2px #50fa7b33;outline:none}.copy-button{-webkit-touch-callout:none;appearance:none;background-color:var(--accent);border:none;border-radius:2px;color:var(--bg-primary);cursor:pointer;font-size:var(--font-size-sm);font-weight:700;min-height:44px;padding:var(--spacing-sm) var(--spacing-md);transition:background-color var(--transition-fast);-webkit-user-select:none;user-select:none}.copy-button:hover{background-color:var(--accent-hover)}.copy-button:active{transform:scale(.98)}.code-content{flex:1 1;font-family:var(--font-family-mono);font-size:13px;line-height:1.6;overflow-y:auto;padding:var(--spacing-md)}.code-block{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;overflow-x:auto;padding:var(--spacing-md)}.demo-panel{background-color:#fff;display:flex;flex-direction:column;overflow:hidden}.demo-header{background-color:#f0f0f0;border-bottom:1px solid #ddd;color:#333;font-size:var(--font-size-sm);font-weight:600;padding:var(--spacing-md) var(--spacing-lg);text-align:center}.demo-frame{border:none;flex:1 1;height:100%;min-height:400px;overflow:hidden;width:100%}.demo-frame-container{align-items:center;background-color:#fff;display:flex;flex:1 1;justify-content:center;overflow:auto;padding:var(--spacing-lg)}.demo-error{background-color:#ff55551a;border:1px solid #f55;border-radius:4px;color:#f55;padding:var(--spacing-lg);text-align:center}.demo-error,.demo-loading{font-size:var(--font-size-md)}.demo-loading{color:var(--text-secondary)}@media (max-width:1200px){.sidebar{width:240px}}@media (max-width:768px){.app-container{flex-direction:column;height:auto;min-height:100vh}.sidebar{-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border-color);border-right:none;max-height:auto;overflow-x:auto;overflow-y:hidden;padding:var(--spacing-md) 0;width:100%}.sidebar-header{padding:var(--spacing-md) var(--spacing-md)}.sidebar-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm)}.sidebar-links{font-size:var(--font-size-sm);margin-bottom:var(--spacing-md);padding:0 var(--spacing-md)}.experiment-list{-webkit-overflow-scrolling:touch;flex-direction:row;gap:var(--spacing-md);overflow-x:auto;overflow-y:hidden;padding:0 var(--spacing-md);scroll-behavior:smooth}.experiment-item{display:flex;flex-direction:column;flex-shrink:0;justify-content:center;min-height:var(--touch-target-min);min-width:180px;padding:var(--spacing-md)}.experiment-number{margin-bottom:var(--spacing-xs)}.experiment-name{font-size:var(--font-size-md);line-height:1.3}.experiment-desc{line-height:1.3}.concept-tag,.experiment-desc{font-size:11px;margin-top:var(--spacing-xs)}.concept-tag{padding:var(--spacing-xs) var(--spacing-sm)}.content-area{flex:1 1;overflow:hidden}.content-header{align-items:flex-start;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md)}.header-title{font-size:var(--font-size-md);word-break:break-word}.experiment-panels{gap:0;grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:calc(100vh - 300px);overflow:hidden}.code-panel{border-bottom:1px solid var(--border-color);border-right:none;min-height:40%}.code-header{flex-wrap:wrap;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.file-selector{flex-basis:100%}.copy-button,.file-selector{font-size:var(--font-size-base);min-height:var(--touch-target-min)}.copy-button{flex:1 1}.code-content{-webkit-text-size-adjust:100%;font-size:13px;line-height:1.5;padding:var(--spacing-md)}.demo-frame{height:100%;min-height:auto}.demo-frame-container{padding:var(--spacing-md)}}@media (max-width:480px){:root{--spacing-md:12px;--spacing-lg:16px;--font-size-md:15px;--font-size-lg:16px}.app-container{height:auto}.sidebar{max-height:none;padding:var(--spacing-sm) 0}.sidebar-header{margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.sidebar-title{font-size:var(--font-size-lg);margin-bottom:var(--spacing-xs)}.sidebar-links{flex-wrap:wrap;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);padding:0 var(--spacing-md)}.sidebar-links a{font-size:11px;padding:var(--spacing-xs) var(--spacing-sm)}.experiment-list{gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:0 var(--spacing-sm)}.experiment-item{align-items:flex-start;flex-shrink:0;justify-content:center;min-height:50px;min-width:140px;padding:var(--spacing-sm)}.experiment-number{font-size:11px;margin-bottom:2px}.experiment-name{font-size:var(--font-size-base);font-weight:600;line-height:1.2}.concept-tag,.experiment-desc{display:none}.content-area{height:auto}.content-header{align-items:flex-start;border-bottom:1px solid var(--border-color);flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}.header-number{font-size:var(--font-size-base)}.header-title{font-size:var(--font-size-md);line-height:1.2}.experiment-panels{gap:0;grid-template-columns:1fr;grid-template-rows:auto auto;height:auto}.code-panel{border-bottom:1px solid var(--border-color);border-right:none;max-height:40vh;min-height:300px}.code-header{flex-wrap:wrap;gap:var(--spacing-xs);padding:var(--spacing-sm)}.file-selector{flex-basis:100%}.copy-button,.file-selector{font-size:var(--font-size-base);min-height:40px;padding:var(--spacing-sm)}.copy-button{flex:1 1}.code-content{-webkit-text-size-adjust:none;line-height:1.5;overflow-x:auto;-webkit-user-select:text;user-select:text}.code-block,.code-content{font-size:12px;padding:var(--spacing-sm)}.demo-panel{max-height:50vh;min-height:300px}.demo-header{font-size:11px;padding:var(--spacing-sm) var(--spacing-md)}.demo-frame{height:100%;min-height:auto}.demo-frame-container{padding:var(--spacing-sm)}.demo-error{font-size:var(--font-size-sm);padding:var(--spacing-md)}.demo-loading{font-size:var(--font-size-base)}}@media (max-width:360px){:root{--spacing-md:10px;--spacing-lg:14px;--font-size-base:13px;--font-size-md:14px}.experiment-item{min-width:120px;padding:6px}.experiment-name{font-size:13px}.code-content{font-size:11px}.content-header{padding:8px 12px}.sidebar-links{font-size:10px}}pre[class*=language-]{-webkit-overflow-scrolling:touch!important;word-wrap:normal!important;background-color:#282a36!important;border-radius:4px!important;color:#f8f8f2!important;font-family:var(--font-family-mono)!important;font-size:13px!important;-webkit-hyphens:none!important;hyphens:none!important;line-height:1.6!important;margin:0!important;overflow-x:auto!important;padding:16px!important;text-shadow:0 1px #0000004d!important;white-space:pre!important;word-break:normal!important;word-spacing:normal!important}code[class*=language-]{background-color:initial!important;color:inherit!important;font-family:inherit!important;text-shadow:inherit!important}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6272a4}.token.punctuation{color:#f8f8f2}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#ff79c6}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#f1fa8c}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#50fa7b}.token.atrule,.token.attr-value{color:#f1fa8c}.token.keyword{color:#ff79c6}.token.class-name,.token.function{color:#8be9fd}.token.important,.token.regex,.token.variable{color:#ffb86c}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.7}@media (max-width:768px){pre[class*=language-]{border-radius:3px!important;font-size:12px!important;padding:12px!important}}@media (max-width:480px){pre[class*=language-]{line-height:1.5!important;padding:10px!important}code[class*=language-],pre[class*=language-]{font-size:11px!important}}
/*# sourceMappingURL=main.44fd9760.css.map*/