*,*:before,*:after{box-sizing:border-box}*{margin:0}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}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: rgba(0, 0, 0, .5);--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: rgba(0, 0, 0, .7);--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-weight:600;font-size:55px}h2{font-size:22px}h3{margin-bottom:1rem}table{width:100%;margin:0 0 30px;border-collapse:collapse}th{text-align:left}th,td{border-bottom:1px solid var(--color-border);padding:2px}input{padding:5px;border:1px solid var(--color-border-input);border-radius:4px;width:160px;background:var(--color-bg-surface);color:var(--color-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.button-reset{background:none;border:none;padding:0;margin:0;appearance:none;-webkit-appearance:none;font:inherit;color:inherit;outline:none;box-shadow:none;cursor:pointer;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);padding:3px 7px;border-radius:4px;cursor:pointer;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);padding:0 5px;font-weight:600;font-size:14px;margin-top:2px}.danger:hover{background:var(--color-danger-hover)}.container{max-width:1100px;margin:0 auto;padding:0 20px;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}.header{padding:40px 0 60px;text-align:center;text-shadow:2px 2px 0 var(--color-text-shadow)}.header span{font-weight:600;font-size:17px;display:block;color:var(--color-text);text-shadow:1px 1px 0 var(--color-text-shadow)}.joins{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:2rem;gap:2rem}.join{flex-grow:1;padding:10px;border:1px solid transparent;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{font-size:12px;color:var(--color-text-light);margin:0 0 10px}.join svg{display:block;margin:0 auto 5px}.sql-container{font-size:14px;background:var(--color-bg-surface);border:1px solid var(--color-border);position:relative;border-radius:4px 4px 0;margin:0 0 2rem;box-shadow:inset 0 0 10px var(--color-bg-inset);text-align:center}.sql-container:before{content:"SQL";position:absolute;top:-14px;left:50%;display:block;width:46px;margin:0 0 0 -23px;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:4px;text-align:center;padding:2px 0}.sql{display:flex;justify-content:center;align-items:center;padding:15px 20px;min-height:90px;text-align:center;color:var(--color-text-muted);text-shadow:1px 1px 0 var(--color-bg-surface);white-space:pre-line}.show-desc{position:absolute;bottom:-24px;right:-1px;padding:1px 5px 3px;border-radius:0 0 4px 4px;color:var(--color-accent-teal);border:1px solid var(--color-border);border-top:none;background:var(--color-bg-body-end)}.show-desc:hover{color:var(--color-accent-orange);cursor:pointer}.desc{padding:15px 0;border-top:1px dashed var(--color-border);margin:0 20px;color:var(--color-text-desc)}.tables{display:flex;flex-wrap:wrap;gap:2rem;margin:0 0 2rem}.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{text-decoration:line-through;color:var(--color-not-selected);font-weight:300}.footer{display:flex;justify-content:space-between;font-size:14px;color:var(--color-text-muted);border-top:1px solid var(--color-border);padding:15px}.overlay{position:fixed;inset:0;background:var(--color-overlay)}.modal{position:fixed;z-index:1000;top:50%;left:50%;transform:translate3d(-50%,-50%,0);padding:15px;border:2px solid var(--color-border-modal);background:var(--color-bg-surface);border-radius:8px;box-shadow:inset 0 0 6px var(--color-modal-shadow)}.input-sm{width:47px}.add-form{display:flex;gap:10px}.header-controls{position:absolute;top:15px;right:20px;z-index:100;display:flex;gap:4px;align-items:center}.theme-toggle{padding:8px;border-radius:4px;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{padding:8px;border-radius:4px;transition:background .2s}.language-toggle:hover{background:#0000000d}.language-toggle svg{width:22px;height:22px;color:var(--color-text-muted);display:block}.language-menu{position:absolute;top:100%;right:0;margin-top:4px;padding:4px 0;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:4px;box-shadow:0 2px 8px var(--color-overlay);list-style:none;min-width:120px}.language-option{width:100%;padding:8px 12px;text-align:left;font-size:14px;color:var(--color-text);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{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}