.app{width:100%;min-height:100vh;display:flex;flex-direction:column;color:var(--text-primary);background:linear-gradient(160deg,#00142de0,#001229f0 45%,#000a1afa)}.header{padding:1.25rem 2.5rem;background:linear-gradient(132deg,#001834f7,#001229fa);border-bottom:1px solid var(--border-strong);display:flex;justify-content:space-between;align-items:center;gap:2.5rem;box-shadow:0 20px 40px #00102673;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.header-left{display:flex;flex-direction:column;gap:.6rem}.brand{display:flex;align-items:center;gap:1rem;background:#00142dd9;border:1px solid rgba(59,126,161,.6);border-radius:12px;padding:.75rem 1.1rem;box-shadow:0 12px 24px #000e208c}.brand-logo{width:56px;height:56px;border-radius:12px;object-fit:contain;background-color:#ffc64629;padding:.3rem;box-shadow:0 12px 26px #ffc64638}.brand-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem}.brand-code{font-family:Source Code Pro,Courier New,Courier,monospace;font-size:1rem;font-weight:600;color:var(--california-gold);background:#05162ceb;padding:.12rem .4rem;border-radius:4px;border:1px solid rgba(255,198,70,.65)}.brand-name{font-size:1.05rem;font-weight:700;letter-spacing:.01em;color:#fefefe;text-shadow:none}.current-example{font-size:.85rem;color:var(--text-primary);font-weight:600;display:inline-flex;align-items:center;gap:.4rem;background:#1b50818c;border:1px solid rgba(59,126,161,.75);padding:.45rem .9rem;border-radius:999px;width:fit-content;box-shadow:inset 0 0 0 1px #00122480}.header-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}.export-button{background:linear-gradient(135deg,#2d6c96f2,#1e5278f2);border:1px solid rgba(45,108,150,.75);color:var(--text-primary)}.export-button:hover:not(:disabled){background:linear-gradient(135deg,#3f84b0,#265e8a);border-color:#ffc64699}.export-button:disabled{opacity:.5;cursor:not-allowed}.share-button{background:linear-gradient(135deg,#063060eb,#032348eb);border:1px solid rgba(138,198,255,.65);color:#f4fbff;box-shadow:0 10px 20px #00122880}.share-button:hover:not(:disabled){background:linear-gradient(135deg,#0e4888f2,#063060f2);border-color:#bfe5ffcc;color:#f4fbff}.share-button:disabled{opacity:.5;cursor:not-allowed}.examples-button{background:#072852c7;border:1px solid rgba(59,126,161,.5);color:var(--text-primary);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.examples-button:hover:not(:disabled){background:#0a305ee6;border-color:#ffc64680}.run-button{background:linear-gradient(132deg,#ffc646f5,#c4820ef5);color:#1d1a10;border:1px solid rgba(255,198,70,.85);font-weight:700;text-shadow:0 1px 2px rgba(255,255,255,.18)}.run-button:hover:not(:disabled){background:linear-gradient(132deg,#ffcf68,#c88c1a);border-color:#ffd676e6}.status{font-size:.875rem;color:#e9f7ff;font-weight:600;background:#041e40eb;border:1px solid rgba(126,196,255,.68);padding:.45rem .95rem;border-radius:999px;box-shadow:0 12px 22px #00102473}.status.ready{color:#ebfaff;background:#073c6cf0;border-color:#92d8ffbf}.status.error{color:#ffe8e6;background:#77171be0;border-color:#f07676b3}.status.loading{color:#1f1300;background:linear-gradient(135deg,#ffc646f2,#c4820ee6);border-color:#ffd676cc}.main-content{flex:1;display:flex;overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.main-content.jupyter-style{display:grid;grid-template-columns:45% 55%}.notebook-panel{display:flex;flex-direction:column;border-right:2px solid rgba(255,198,70,.3);background:var(--panel-elevated);overflow:hidden}.notebook-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;background:#003464ad;border-bottom:1px solid rgba(255,198,70,.25);box-shadow:inset 0 -1px #0012247a}.notebook-info{display:flex;align-items:center;gap:.75rem}.notebook-name{font-weight:600;color:var(--text-primary);font-size:.875rem;text-transform:uppercase;letter-spacing:.06em;background:#ffc64624;padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(255,198,70,.38);box-shadow:0 0 0 1px #00183473}.notebook-hint{font-size:.75rem;color:var(--text-primary);font-style:italic}.notebook-cells{flex:1;overflow:hidden;padding:1rem;background:linear-gradient(180deg,#001630e6,#001229f2);display:flex;flex-direction:column}.notebook-cell-simple{display:flex;flex-direction:column;height:100%;border:1px solid rgba(59,126,161,.5);border-radius:6px;background:#000f22d1;overflow:hidden;box-shadow:0 20px 36px #00122980}.cell-editor-simple{flex:1;background-color:transparent}.editor-panel{flex:1;display:flex;flex-direction:column;border-right:1px solid rgba(59,126,161,.4)}.editor-controls{padding:.75rem 1rem;background:#001f3f99;border-bottom:1px solid rgba(59,126,161,.3);display:flex;gap:.5rem}.editor-container{flex:1;overflow:hidden;background:#000f20d9}.trace-panel{display:flex;flex-direction:column;background:linear-gradient(180deg,#001229f0,#000c1ffa);overflow:hidden;border-left:1px solid rgba(255,198,70,.2);box-shadow:inset 0 0 0 1px #001a3899}.panel-tabs{display:flex;background:#031228eb;border-bottom:1px solid rgba(255,198,70,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tab{padding:.75rem 1.5rem;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;font-weight:600;color:var(--text-primary)}.tab.active{border-bottom-color:var(--california-gold);background-color:#ffc64629;color:var(--text-primary)}.tab:not(.active):hover{background-color:#12407899}.panel-content{flex:1;overflow-y:auto;padding:1rem;background:transparent}.trace-view{min-height:100%}.empty-state{text-align:center;padding:3rem 2rem;background:#00244bad;border-radius:8px;border:1px solid rgba(59,126,161,.45);box-shadow:0 14px 30px #0018347a}.empty-state h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.5rem}.empty-state p{margin-bottom:1.5rem;line-height:1.6;color:var(--text-primary)}.trace-note{background-color:#ffc64626;color:var(--california-gold);padding:1rem;border-radius:6px;border-left:4px solid rgba(255,198,70,.78);text-align:left;max-width:600px;margin:1rem auto;font-size:.875rem;line-height:1.6}.trace-note strong{display:block;margin-bottom:.5rem;color:var(--california-gold);font-weight:700}.trace-note code{background-color:#ffc64638;padding:.2rem .4rem;border-radius:3px;font-family:Courier New,monospace;color:#251a00;font-weight:600}.example-hint{background:#001c3cb8;border:2px solid rgba(59,126,161,.45);border-radius:8px;padding:1.5rem;text-align:left;max-width:550px;margin:0 auto;box-shadow:0 14px 28px #00122980}.example-hint strong{color:var(--california-gold);font-size:1rem}.example-hint pre{margin-top:.75rem;font-size:.875rem;line-height:1.6;color:var(--text-primary);background-color:#001026d1;padding:1rem;border-radius:6px;border:1px solid rgba(59,126,161,.42)}.notebook-panel .monaco-editor,.notebook-panel .monaco-editor-background,.notebook-panel .monaco-editor .margin{background-color:#04070f!important}.trace-timeline{display:flex;flex-direction:column;gap:1rem}.timeline-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:.5rem;border-bottom:2px solid #333;margin-bottom:.5rem}.timeline-header h3{margin:0;font-size:1.25rem}.timeline-count{font-size:.875rem;color:#888}.timeline-steps{display:flex;flex-direction:column;gap:.75rem}.trace-step{background:#001f3fc7;border:1px solid rgba(59,126,161,.35);border-radius:8px;overflow:hidden;transition:all .3s ease;opacity:0;transform:translateY(10px);box-shadow:0 14px 30px #00122973}.trace-step.fade-in{opacity:1;transform:translateY(0)}.trace-step:hover{border-color:#fdb5158c;box-shadow:0 18px 32px #00122999}.step-header{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:#001834b8;border:none;width:100%;text-align:left;color:inherit;font:inherit}.step-header:focus-visible{outline:2px solid var(--california-gold);outline-offset:2px}.step-header:hover{background-color:#001f3fd9}.step-number{min-width:5rem}.step-badge{background:linear-gradient(135deg,#3b7ea1,#003262);color:var(--text-primary);padding:.25rem .75rem;border-radius:6px;font-size:.75rem;font-weight:700;display:inline-block;text-shadow:0 1px 2px rgba(0,0,0,.4);border:1px solid rgba(59,126,161,.65)}.step-operation{flex:1}.step-operation code{font-family:Courier New,monospace;color:var(--california-gold);font-weight:700;font-size:1.05rem;background-color:#fdb51514;padding:.25rem .6rem;border-radius:4px;border:1px solid rgba(253,181,21,.3);box-shadow:inset 0 0 0 1px #00122459}.step-toggle{margin-left:auto;color:var(--text-tertiary);font-size:.75rem}.step-explanation{padding:.75rem 1rem;color:var(--text-secondary);font-size:.9rem;line-height:1.6;background-color:#001229d9;display:flex;align-items:flex-start;gap:.5rem;border-top:1px solid rgba(59,126,161,.28)}.explanation-icon{flex-shrink:0;font-size:1rem}.step-details{border-top:1px solid rgba(59,126,161,.28);padding:1rem;background-color:#000f20e6}.step-args{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem;font-family:Courier New,monospace}.step-tables{display:flex;gap:2rem;align-items:flex-start}.table-container{flex:1;position:relative}.transform-arrow{text-align:center;font-size:2rem;color:var(--california-gold);margin-bottom:.5rem;font-weight:700;animation:bounce 2s infinite;text-shadow:0 0 14px rgba(253,181,21,.35)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.table-preview{border:1px solid rgba(59,126,161,.4);border-radius:6px;overflow:hidden;background:#001834b8;box-shadow:0 10px 22px #00122973}.preview-title{padding:.5rem .75rem;background-color:#0032628c;border-bottom:1px solid rgba(59,126,161,.35);font-weight:700;font-size:.9rem;color:var(--california-gold);letter-spacing:.045em}.table-info{padding:.5rem .75rem;font-size:.75rem;color:var(--text-secondary);background-color:#001834cc;border-bottom:1px solid rgba(59,126,161,.35)}.table-scroll{overflow-x:auto;max-height:400px;overflow-y:auto}.data-table{width:100%;border-collapse:collapse;font-size:.875rem;color:var(--text-primary)}.data-table th{background-color:#003262a6;padding:.5rem .75rem;text-align:left;font-weight:600;border-bottom:2px solid rgba(253,181,21,.25);position:sticky;top:0;z-index:1;letter-spacing:.05em}.data-table td{padding:.5rem .75rem;border-bottom:1px solid rgba(59,126,161,.25)}.data-table tr:hover td{background-color:#00326259}.table-truncated{padding:.5rem .75rem;font-size:.75rem;color:var(--text-tertiary);font-style:italic;text-align:center;background-color:#001834bf}.empty-message,.error-message{padding:1rem;text-align:center;color:var(--text-secondary);font-style:italic}.error-message{color:#ffcbc1}.output-section-bottom{margin-top:2rem;padding-top:1.5rem;border-top:2px solid rgba(253,181,21,.18)}.output-section h4{margin-bottom:.75rem;color:var(--california-gold);font-size:1rem;letter-spacing:.05em;text-transform:uppercase}.output-content{background-color:#001834b3;border:1px solid rgba(59,126,161,.35);border-radius:6px;padding:1rem;font-family:Courier New,monospace;font-size:.875rem;max-height:300px;overflow-y:auto}.output-line{margin-bottom:.25rem}.output-error{color:#ffd6d9;padding:1rem;background-color:#93232352;border-left:3px solid rgba(220,82,82,.85);border-radius:6px;margin-top:1rem;box-shadow:inset 0 0 0 1px #93232340}.output-error strong{display:block;margin-bottom:.5rem;color:#ffcbc1}.output-error .error-message{font-family:Courier New,monospace;background-color:#001834a6;padding:.75rem;border-radius:4px;margin-bottom:1rem;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(220,82,82,.45)}.output-error .error-help{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(220,82,82,.4);color:var(--text-secondary);font-size:.9rem}.output-error .error-help strong{color:#ffcbc1;display:block;margin-bottom:.5rem}.output-error .error-help ul{margin-left:1.5rem;margin-top:.5rem}.output-error .error-help li{margin-bottom:.5rem}.output-error .error-help code{background-color:#001834a6;padding:.2em .4em;border-radius:3px;font-size:.9em;color:var(--california-gold);border:1px solid rgba(253,181,21,.35)}@media (max-width: 1024px){.main-content.jupyter-style{grid-template-columns:1fr;grid-template-rows:50% 50%}.notebook-panel{border-right:none;border-bottom:2px solid rgba(253,181,21,.2)}}@media (max-width: 768px){.header{padding:1rem;flex-direction:column;gap:1rem;align-items:stretch}.brand{justify-content:center}.header-left{align-items:center;text-align:center}.header-controls{justify-content:space-between}.current-example{font-size:.75rem}}.data-transformation{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;padding:1.75rem;background:var(--panel-elevated);border-radius:14px;margin:1rem 0;opacity:0;transform:translateY(20px);transition:all .5s ease;border:1px solid var(--border-subtle);box-shadow:0 24px 38px #00122999}.data-transformation.animated{opacity:1;transform:translateY(0)}.transform-section{display:flex;flex-direction:column;gap:.75rem}.section-header{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;background:#003464b3;border-radius:8px;border:1px solid var(--border-subtle);box-shadow:inset 0 0 0 1px #00122966}.section-icon{font-size:1.25rem;color:var(--california-gold)}.section-title{font-weight:700;font-size:.875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-primary)}.section-info{margin-left:auto;font-size:.75rem;color:var(--text-tertiary);font-family:Source Code Pro,Courier New,monospace}.data-table-wrapper{background:#001a38d1;border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;min-height:100px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #00122961}.empty-table-placeholder{text-align:center;padding:2rem;color:var(--text-tertiary)}.empty-icon{font-size:3rem;margin-bottom:.5rem;opacity:.6;text-shadow:0 0 18px rgba(59,126,161,.35)}.empty-text{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:.25rem}.empty-subtext{font-size:.75rem;color:var(--text-tertiary);font-style:italic}.data-table.compact{width:100%;border-collapse:collapse;font-size:.8rem;color:var(--text-primary)}.data-table.compact th{background-color:#003464b8;padding:.4rem .6rem;text-align:left;font-weight:600;border-bottom:2px solid rgba(253,181,21,.25);color:var(--text-primary);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.data-table.compact td{padding:.4rem .6rem;border-bottom:1px solid rgba(59,126,161,.25);color:var(--text-secondary)}.data-table.compact tr:hover td{background-color:#00386e61}.removed-column{background-color:#dc525240!important;color:#ffcbc1!important;text-decoration:line-through}.removed-cell{background-color:#dc52522e!important;color:var(--text-tertiary)!important;opacity:.65}.added-column{background-color:#ffc64633!important;color:#1f1300!important;font-weight:700;box-shadow:inset 0 0 0 1px #ffc64666}.added-cell{background-color:#ffc64624!important;color:#1f1300!important;font-weight:600}.table-more{padding:.5rem;text-align:center;font-size:.75rem;color:var(--text-tertiary);background-color:#001a38d1;font-style:italic}.transform-arrow-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-width:100px}.transform-arrow-label{font-family:Source Code Pro,Courier New,monospace;font-size:.875rem;font-weight:700;color:var(--california-gold);background-color:#002046d1;padding:.25rem .75rem;border-radius:999px;border:1px solid rgba(255,198,70,.4);letter-spacing:.08em}.transform-arrow{font-size:3rem;color:var(--california-gold);font-weight:700;animation:pulse 2s infinite;text-shadow:0 0 20px rgba(253,181,21,.45)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.transform-changes{display:flex;flex-direction:column;gap:.25rem}.change-badge{font-size:.7rem;padding:.2rem .5rem;border-radius:4px;font-weight:600;text-align:center;background-color:#00346480;color:var(--text-secondary);border:1px solid var(--border-subtle)}.change-badge.removed{background-color:#dc525240;border-color:#dc525299;color:#ffcbc1}.change-badge.added{background-color:#fdb51540;border-color:#fdb51580;color:#1f1300}@media (max-width: 1024px){.data-transformation{grid-template-columns:1fr;grid-template-rows:auto auto auto}.transform-arrow-container{transform:rotate(90deg);margin:1rem 0}}.step-slideshow{display:flex;flex-direction:column;gap:1.5rem;padding:1rem 0}.slideshow-header{display:flex;flex-direction:column;gap:.75rem;padding:1.5rem;background:#002a54d1;border-radius:12px;border:1px solid var(--border-subtle);box-shadow:0 20px 40px #0012298c}.step-indicator{display:flex;justify-content:center}.step-badge{background:linear-gradient(135deg,#286ea0,#0a3868);color:var(--text-primary);padding:.45rem 1.4rem;border-radius:999px;font-size:.875rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4);letter-spacing:.05em;border:1px solid rgba(40,110,160,.75)}.step-operation-title{text-align:center}.step-operation-title code{font-family:Source Code Pro,Courier New,monospace;font-size:1.4rem;color:#1f1300;font-weight:700;background-color:#ffc64640;padding:.45rem 1.1rem;border-radius:6px;border:1px solid rgba(255,198,70,.38);box-shadow:inset 0 0 0 1px #00122447}.slideshow-explanation{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1.25rem 2rem;background:#00264ed1;border-radius:12px;border:1px solid var(--border-subtle);box-shadow:0 18px 34px #00122980}.explanation-text{font-size:1.125rem;color:var(--text-secondary);line-height:1.6;font-weight:500;text-align:center;width:100%}.slideshow-visualization{margin:.5rem 0}.slideshow-controls{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.5rem;background:#00244bd9;border-radius:12px;border:1px solid var(--border-subtle);box-shadow:0 20px 38px #0012298c}.nav-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#08386ac7;border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:999px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .2s;min-width:150px;box-shadow:0 12px 24px #00122973}.nav-button:hover:not(:disabled){background-color:#0a427ce6;border-color:#ffc6468c;transform:translateY(-1px);box-shadow:0 16px 28px #00122994}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button .arrow{font-size:1.5rem;font-weight:700;color:var(--california-gold)}.nav-button.prev{justify-content:flex-start}.nav-button.next{justify-content:flex-end}.step-dots{display:flex;gap:.5rem;align-items:center}.dot{width:12px;height:12px;border-radius:50%;background-color:#08386a80;border:2px solid var(--border-subtle);cursor:pointer;transition:all .2s;padding:0}.dot:hover{background-color:#0a427cbf;transform:scale(1.2)}.dot.active{background-color:var(--california-gold);border-color:#ffc646c7;width:16px;height:16px;box-shadow:0 0 12px #ffc64673}.keyboard-hint{text-align:center;font-size:.75rem;color:var(--text-tertiary);font-style:italic;font-family:Source Code Pro,Courier New,monospace}@media (max-width: 768px){.slideshow-controls{flex-direction:column;gap:1rem}.nav-button{width:100%;justify-content:center}.step-dots{order:-1}}.gallery-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top right,#002d5af0,#001834f7 45%,#000a1afc);display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem;overflow-y:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.gallery-modal{background:linear-gradient(165deg,#001834f2,#001026fa);border-radius:18px;max-width:1200px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 84px #000c1fad;border:1px solid var(--border-subtle)}.gallery-header{padding:2.25rem;border-bottom:1px solid var(--border-subtle);display:flex;justify-content:space-between;align-items:flex-start;background:#00346466}.gallery-header h1{margin:0 0 .5rem;font-size:2rem;color:var(--text-primary);letter-spacing:.02em}.gallery-header p{margin:.5rem 0;color:var(--text-primary);font-size:1rem}.inspiration{font-size:.875rem;font-style:italic;color:var(--text-tertiary)}.inspiration a{color:var(--california-gold);text-decoration:none;font-weight:600}.inspiration a:hover{text-decoration:underline}.close-button{background:#001c3cb3;border:1px solid var(--border-subtle);font-size:1.75rem;color:var(--text-secondary);cursor:pointer;padding:0;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:12px;transition:all .2s;box-shadow:0 12px 24px #000c1f73}.close-button:hover{background-color:#ffc6462e;color:var(--text-primary);border-color:#ffc64680}.category-filter{padding:1.25rem 2.25rem;display:flex;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--border-subtle);background-color:#0020469e}.category-filter button{padding:.5rem 1rem;border:1px solid var(--border-subtle);background-color:#001a38b8;color:var(--text-secondary);border-radius:999px;cursor:pointer;transition:all .2s;font-size:.875rem;font-weight:600}.category-filter button:hover{border-color:#ffc64680;color:var(--text-primary);background-color:#00244bd9}.category-filter button.active{background:linear-gradient(135deg,#286ea0,#0a3868);border-color:#286ea0c7;color:var(--text-primary);font-weight:700;box-shadow:0 14px 24px #00122980}.examples-grid{padding:2.25rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.75rem}.example-card{background:#001834c7;border:1px solid var(--border-subtle);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .25s;box-shadow:0 16px 32px #000c1f73;display:block;text-align:left;padding:0;color:inherit;font:inherit}.example-card:hover{border-color:#ffc6467a;transform:translateY(-4px);box-shadow:0 18px 36px #000c1f99}.example-card:focus-visible{outline:2px solid rgba(255,198,70,.8);outline-offset:3px}.example-thumbnail{height:120px;background:linear-gradient(135deg,#08386ac7,#001834eb);display:flex;align-items:center;justify-content:center;padding:1rem;border-bottom:1px solid var(--border-subtle);position:relative}.operation-badges{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.operation-badge{background-color:#ffc6463d;color:#1f1300;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;font-family:Source Code Pro,Courier New,monospace;border:1px solid rgba(255,198,70,.45)}.example-info{padding:1.25rem}.example-info h3{margin:0 0 .5rem;font-size:1.2rem;color:var(--text-primary);letter-spacing:.015em}.example-info p{margin:0 0 .75rem;color:var(--text-secondary);font-size:.9rem;line-height:1.5}.example-category{display:inline-block;background-color:#0034648c;color:var(--text-secondary);padding:.25rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.05em;border:1px solid var(--border-subtle)}.gallery-footer{padding:1.75rem 2.25rem;border-top:1px solid var(--border-subtle);display:flex;justify-content:center;background-color:#002046ad}.secondary-button{padding:.75rem 2rem;background:#001a38c7;border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:999px;cursor:pointer;font-size:1rem;transition:all .2s;box-shadow:0 14px 26px #000c1f80}.secondary-button:hover{background-color:#ffc6462e;border-color:#ffc64680;color:var(--text-primary)}@media (max-width: 768px){.gallery-overlay{padding:0}.gallery-modal{border-radius:0;max-height:100vh}.examples-grid{grid-template-columns:1fr;padding:1.5rem}.gallery-header{padding:1.75rem 1.25rem}.category-filter{padding:1.25rem}}:root{font-family:Inter,Source Sans Pro,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;--berkeley-blue: #003262;--berkeley-blue-dark: #00142a;--berkeley-blue-muted: #001a34;--founders-rock: #3b7ea1;--california-gold: #ffc646;--medalist: #c4820e;--pacific: #264d79;--point-grey: #576f7d;--cloud-white: #f9fafb;--panel-elevated: rgba(0, 24, 58, .88);--panel-muted: rgba(18, 56, 92, .74);--border-strong: rgba(255, 198, 70, .55);--border-subtle: rgba(59, 126, 161, .45);--text-primary: #f7f9fd;--text-secondary: #dbe4f3;--text-tertiary: #bac4d4;color:var(--text-primary);background:radial-gradient(circle at top left,#003262eb,#00142df5 55%,#000a1a);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;display:flex;min-width:320px;min-height:100vh;background:transparent}#root{width:100%;height:100vh}button{border-radius:999px;border:1px solid transparent;padding:.6em 1.3em;font-size:1em;font-weight:600;font-family:inherit;background:#002954bf;color:var(--text-primary);cursor:pointer;transition:transform .2s ease,border-color .25s,box-shadow .25s ease}button:hover:not(:disabled){border-color:var(--california-gold);box-shadow:0 6px 18px #ffc64647;transform:translateY(-1px)}button:focus,button:focus-visible{outline:3px solid rgba(253,181,21,.6);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}@media (prefers-color-scheme: light){:root{color-scheme:dark;color:var(--text-primary);background:radial-gradient(circle at top left,#003262eb,#001f3ff2 55%,#000d1f)}}