*,:before,:after{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{-webkit-font-smoothing:antialiased;line-height:1.5}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}:root{--color-text:#3f2629;--color-text-muted:#777;--color-text-light:#999;--color-text-desc:#444;--color-heading:#8f252f;--color-text-shadow:#ddd;--color-bg-body-start:#eee;--color-bg-body-end:#f9f9f9;--color-bg-surface:#fff;--color-bg-surface-alt:#fafafa;--color-bg-inset:#eee;--color-border:#ddd;--color-border-input:#ccc;--color-border-modal:#6a4a3c;--color-accent-teal:#00a0b0;--color-accent-orange:#eb6841;--color-button-bg:#5ec456;--color-button-border:#3e9436;--color-button-hover:#4eb446;--color-danger-bg:#c1353e;--color-danger-border:#a11413;--color-danger-hover:#b1252e;--color-null:#ccc;--color-not-selected:#777;--svg-fill:#cc333f;--svg-stroke-left:#00a0b0;--svg-stroke-right:#eb6841;--color-overlay:#00000080;--color-modal-shadow:#888}[data-theme=dark]{--color-text:#e8e0dc;--color-text-muted:#a8a0a0;--color-text-light:#888;--color-text-desc:#c0b8b4;--color-heading:#e8626e;--color-text-shadow:#1a1612;--color-bg-body-start:#1a1612;--color-bg-body-end:#252019;--color-bg-surface:#2d2722;--color-bg-surface-alt:#342e28;--color-bg-inset:#1a1612;--color-border:#4a4240;--color-border-input:#5a5250;--color-border-modal:#8a6a5c;--color-accent-teal:#00b8c8;--color-accent-orange:#ff7a55;--color-button-bg:#4eb446;--color-button-border:#3e9436;--color-button-hover:#5ec456;--color-danger-bg:#b1252e;--color-danger-border:#911313;--color-danger-hover:#c1353e;--color-null:#666;--color-not-selected:#888;--svg-fill:#e8424f;--svg-stroke-left:#00b8c8;--svg-stroke-right:#ff7a55;--color-overlay:#000000b3;--color-modal-shadow:#111}html{background:linear-gradient(var(--color-bg-body-start), var(--color-bg-body-end));min-height:100%}body{color:var(--color-text);font:18px/1.4 Open Sans,sans-serif}a{color:var(--color-accent-teal);text-decoration:none}h1,h2,h3,h4,h5,h6{text-shadow:1px 1px 0 var(--color-text-shadow);color:var(--color-heading);margin:0}h1{font-size:55px;font-weight:600}h2{font-size:22px}h3{margin-bottom:1rem}table{border-collapse:collapse;width:100%;margin:0 0 30px}th{text-align:left}th,td{border-bottom:1px solid var(--color-border);padding:2px}input{border:1px solid var(--color-border-input);background:var(--color-bg-surface);width:160px;color:var(--color-text);border-radius:4px;padding:5px}input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}.button-reset{appearance:none;font:inherit;color:inherit;box-shadow:none;cursor:pointer;background:0 0;border:none;outline:none;margin:0;padding:0;display:block}.button{background:var(--color-button-bg);border:1px solid var(--color-button-border);color:#fff;text-shadow:1px 1px 0 var(--color-button-border);cursor:pointer;border-radius:4px;padding:3px 7px;text-decoration:none!important}.button:hover{background:var(--color-button-hover)}.danger{background:var(--color-danger-bg);border-color:var(--color-danger-border);text-shadow:1px 1px 0 var(--color-danger-border);margin-top:2px;padding:0 5px;font-size:14px;font-weight:600}.danger:hover{background:var(--color-danger-hover)}.container{grid-template-rows:auto 1fr auto;max-width:1100px;min-height:100vh;margin:0 auto;padding:0 20px;display:grid}.header{text-align:center;text-shadow:2px 2px 0 var(--color-text-shadow);padding:40px 0 60px}.header span{color:var(--color-text);text-shadow:1px 1px 0 var(--color-text-shadow);font-size:17px;font-weight:600;display:block}.joins{flex-wrap:wrap;justify-content:space-between;gap:2rem;margin-bottom:2rem;display:flex}.join{border:1px solid #0000;flex-grow:1;padding:10px;transition:transform .4s,background .2s}.join:hover{transform:scale(1.1)}.join:hover,.current-join{cursor:pointer;background:var(--color-bg-surface);border-color:var(--color-border);border-radius:4px}.subtitle{color:var(--color-text-light);margin:0 0 10px;font-size:12px}.join svg{margin:0 auto 5px;display:block}.sql-container{background:var(--color-bg-surface);border:1px solid var(--color-border);box-shadow:inset 0 0 10px var(--color-bg-inset);text-align:center;border-radius:4px 4px 0;margin:0 0 2rem;font-size:14px;position:relative}.sql-container:before{content:"SQL";background:var(--color-bg-surface);border:1px solid var(--color-border);text-align:center;border-radius:4px;width:46px;margin:0 0 0 -23px;padding:2px 0;display:block;position:absolute;top:-14px;left:50%}.sql{text-align:center;min-height:90px;color:var(--color-text-muted);text-shadow:1px 1px 0 var(--color-bg-surface);white-space:pre-line;justify-content:center;align-items:center;padding:15px 20px;display:flex}.show-desc{color:var(--color-accent-teal);border:1px solid var(--color-border);background:var(--color-bg-body-end);border-top:none;border-radius:0 0 4px 4px;padding:1px 5px 3px;position:absolute;bottom:-24px;right:-1px}.show-desc:hover{color:var(--color-accent-orange);cursor:pointer}.desc{border-top:1px dashed var(--color-border);color:var(--color-text-desc);margin:0 20px;padding:15px 0}.tables{flex-wrap:wrap;gap:2rem;margin:0 0 2rem;display:flex}.tables-col{flex:1;min-width:300px}.tables tr:nth-of-type(odd) td{background:var(--color-bg-surface-alt)}@media (hover:hover){.tables button{opacity:0;pointer-events:none;transition:opacity .4s}}.tables-col:hover button{pointer-events:auto;opacity:1}.user{color:var(--color-accent-teal)}.like{color:var(--color-accent-orange)}.is-null{color:var(--color-null)}.is-not-selected td{color:var(--color-not-selected);font-weight:300;text-decoration:line-through}.footer{color:var(--color-text-muted);border-top:1px solid var(--color-border);justify-content:space-between;padding:15px;font-size:14px;display:flex}.overlay{background:var(--color-overlay);position:fixed;inset:0}.modal{z-index:1000;border:2px solid var(--color-border-modal);background:var(--color-bg-surface);box-shadow:inset 0 0 6px var(--color-modal-shadow);border-radius:8px;padding:15px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.input-sm{width:47px}.add-form{gap:10px;display:flex}.header-controls{z-index:100;align-items:center;gap:4px;display:flex;position:absolute;top:15px;right:20px}.theme-toggle{border-radius:4px;padding:8px;transition:background .2s}.theme-toggle:hover{background:#0000000d}[data-theme=dark] .theme-toggle:hover{background:#ffffff1a}.theme-toggle svg{width:22px;height:22px;color:var(--color-text-muted);display:block}.language-switcher{position:relative}.language-toggle{border-radius:4px;padding:8px;transition:background .2s}.language-toggle:hover{background:#0000000d}.language-toggle svg{width:22px;height:22px;color:var(--color-text-muted);display:block}.language-menu{background:var(--color-bg-surface);border:1px solid var(--color-border);box-shadow:0 2px 8px var(--color-overlay);border-radius:4px;min-width:120px;margin-top:4px;padding:4px 0;list-style:none;position:absolute;top:100%;right:0}.language-option{text-align:left;width:100%;color:var(--color-text);padding:8px 12px;font-size:14px;transition:background .2s}.language-option:hover{background:var(--color-bg-surface-alt)}.language-option.is-active{color:var(--color-accent-teal);font-weight:600}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}