*{box-sizing:border-box}body{margin:0;background:#050505 radial-gradient(#292323 5%,transparent 50%);background-size:5px 5px;color:#eee;font-family:'Arial Narrow',Arial,sans-serif}.site{width:858px;max-width:calc(100% - 20px);margin:8px auto 100px;border:1px solid #641211;background:#050505}nav{display:flex;justify-content:center;background:#d50707;min-height:66px;align-items:stretch}nav a{padding:17px 22px;text-decoration:none;color:#fff;font-family:Impact,'Arial Narrow',sans-serif;font-size:25px;font-weight:400}nav a:hover,nav a.active{background:#bb0606}nav small{font:12px Arial}main{padding:20px 10px;border-top:1px solid #641211}h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:23px;text-align:center;margin:16px 0 24px}p{font-size:16px;line-height:1.55}.notice{font:12px/1.5 Arial;color:#bbb;text-align:center;margin:5px 0 12px}.paito{width:556px;max-width:100%;margin:auto}.palette{position:sticky;top:0;z-index:20;background:#ddd;border:2px solid #ddd;display:flex;height:31px;width:100%}button{cursor:pointer;font-family:inherit}#clear{width:10%;border:0;background:#333;color:#fff;text-transform:uppercase;font-size:9px;font-weight:bold}#colors{display:flex;flex:1}.swatch{flex:1;border:0;min-width:0;position:relative}.swatch[aria-pressed=true]{box-shadow:inset 0 0 0 2px #111}.swatch[aria-pressed=true]:after{content:'✓';color:#111;font-size:15px}.swatch:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #ffa600;outline-offset:2px}.instructions{font:11px/1.5 Arial;color:#aaa;text-align:center;margin:10px 0 20px}.table-scroll{overflow:auto;width:100%;border:1px solid #ddd;overscroll-behavior-x:contain}table{border-collapse:collapse;table-layout:fixed;width:100%;min-width:550px;background:#fff;color:#111;user-select:none}th{font:bold 12px Arial;background:#eee;padding:6px 0;border:1px solid #ccc}td{border:1px solid #d9d9d9;text-align:center;font:bold 13px/18px Arial;padding:3px 0;cursor:crosshair;height:25px}td:nth-child(5n){color:#d0cbd0;font-weight:400;border-right:2px solid #bbb}tbody tr:nth-last-child(5n+1){background:#e8e4e7}td.hit{background:var(--hit)!important;color:#fff!important}td:focus-visible{outline:2px solid #111;outline-offset:-2px}.search{display:flex;gap:7px;justify-content:center;padding-top:15px}.search label{display:flex;flex-direction:column;gap:5px;font:bold 10px Arial;color:#bbb;text-align:center}.search input{width:50px;padding:7px 3px;border:1px solid #aaa;text-align:center;color:#d00;font:bold 15px Arial;background:#f0f7f2}.search button{align-self:end;padding:8px;background:#d62c13;color:#fff;border:0}#status{text-align:center;font:12px/1.5 Arial;color:#bbb;min-height:18px}.schedule{text-align:center;font-size:14px}.schedule span{color:#e86460}h2{text-align:center;font-size:18px}details{font:13px/1.6 Arial;color:#bbb;padding:15px 0}details p{font-size:13px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:600px){.site{max-width:100%;margin-top:0;border-left:0;border-right:0}nav{min-height:52px}nav a{font-size:21px;padding:14px 16px}.banners img{height:38px}main{padding:14px 8px}h1{font-size:20px;line-height:1.4}p{font-size:14px}.floating-banners img{height:46px}.instructions{margin-bottom:13px}footer{padding:15px 8px}}
.floating-banners[hidden]{display:none}
/* Geometri tabel mengikuti pengukuran tabel referensi. */
@media(min-width:768px){.site{width:65%;max-width:none}main{padding:20px 0}main>p,main>details{margin-left:10px;margin-right:10px}.paito{width:65%;max-width:100%}}
.palette{height:30px;margin-bottom:10px}.instructions{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0,0,0,0)}
.table-scroll{border:0;margin-top:36px;overflow-x:auto;overflow-y:hidden}
#drawing-table{border-collapse:separate;border-spacing:2px;table-layout:auto;width:100%;min-width:500px;margin:1px;border:1px solid #000;box-sizing:border-box;background:#fff}
#drawing-table th,#drawing-table td{height:23px;box-sizing:content-box;border:1px solid #d9d9d9;padding:3px 0;font-family:Roboto,Arial,sans-serif;font-size:13px;font-weight:700;line-height:normal;text-align:center}
#drawing-table th{height:auto;background:transparent}
#drawing-table td{height:auto}
#drawing-table td:nth-child(5n){background:#fff;color:#d7d1d1;font-weight:700;border-right:1px solid #d9d9d9}
#drawing-table tbody tr:nth-last-child(5n+1){background:#e8e4e7}
.search{gap:5px;padding-top:8px}.search label{gap:0}.search label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.search input{padding:1px 2px;font-size:13px;height:22px}.search button{padding:2px 7px;height:22px;font-size:11px}
@media(max-width:767px){.paito{width:100%;max-width:100%}#drawing-table{min-width:100%;margin:1px 0}}
@media(max-width:370px){#drawing-table td,#drawing-table th{font-size:10px}}

.site{margin-bottom:16px}main{padding-top:20px}.table-scroll{margin-top:16px}

/* Semua baris terbuka: tidak ada area scroll bersarang. */
.table-full{display:block;width:100%;height:auto;max-height:none;overflow:visible;margin-top:16px}
#drawing-table{table-layout:fixed;min-width:0;width:100%;max-width:100%;margin:0}
#drawing-table th,#drawing-table td{min-width:0;overflow-wrap:normal;white-space:nowrap;cursor:default}
@media(max-width:767px){#drawing-table{min-width:0;border-spacing:1px}#drawing-table th,#drawing-table td{font-size:clamp(7px,2.4vw,13px)}nav a{padding-left:12px;padding-right:12px;font-size:clamp(16px,5vw,21px)}}

.search label>span{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;padding:5px 0;background:#ddd;color:#222;border:1px solid #aaa;border-bottom:0;font:bold 10px Arial}.search{gap:5px}.search input{width:46px}.search label{gap:0}

.search label>span{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.table-full{position:relative}#pattern-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:10}#drawing-table td.ai-mark{background:var(--ai-color)!important;color:#fff!important}#drawing-table td[data-prediction]{outline:1px dashed #fff;outline-offset:-3px}
.analysis{margin:12px 0 18px;padding:12px;border:1px solid #555;border-radius:7px;background:#111820;font:12px Arial;color:#d8e2eb}.analysis button,.analysis select{min-height:32px;border-radius:4px;border:1px solid #536474;background:#202e3a;color:#fff;font:11px Arial;cursor:pointer}.analysis label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:10px;text-transform:uppercase;color:#aabcca}.analysis select{width:100%;padding:5px}.analysis-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:10px 0}.analysis-actions{display:flex;gap:6px}.analysis-actions button{flex:1;padding:5px}#ai-toggle{width:100%;font-weight:700;background:#143e3a;border-color:#27a691}#ai-toggle[aria-pressed=true]{background:#07865c}.pattern-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.pattern-group{display:flex;flex:1 1 auto;border-radius:4px;overflow:hidden}.pattern-group button{border-radius:0;padding:4px;min-width:22px}.pattern-group button:nth-child(2){flex:1;font-weight:bold}.mode-depan button{background:#9f640b}.mode-depan-lurus button{background:#a4294e}.mode-lurus button,.mode-e button{background:#167447}.mode-ai button{background:#473b9d}.mode-a button{background:#9b620b}.mode-c button{background:#70398b}.mode-k button{background:#a72b2b}.mode-j button{background:#136889}.analysis p{font:11px/1.6 Arial;margin:9px 0;color:#c3d2dd}.analysis small{font:10px/1.5 Arial;color:#8c9da9}.analysis[aria-busy=true] #ai-toggle{opacity:.7}
.comparison{margin:12px 0;color:#a9bdcd;font:11px/1.6 Arial}.comparison summary{cursor:pointer}.comparison p{font:10px/1.5 Arial}.comparison table{min-width:0;width:100%;table-layout:fixed;color:#ddd;background:#15222e;border-collapse:collapse}.comparison th,.comparison td{height:auto;border:1px solid #465564;background:transparent!important;color:#ddd!important;font:10px/1.5 Arial!important;cursor:default;padding:5px!important}.comparison tbody tr:nth-last-child(5n+1){background:transparent}
.view-controls{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:6px;margin:0 0 12px;font:11px Arial}.view-controls label{display:flex;flex-direction:column;gap:5px;color:#c7d0d8;min-width:0}.view-controls select{width:100%;min-width:0;height:32px;padding:4px;border:1px solid #666;border-radius:3px;background:#18222b;color:#fff;font:11px Arial}.view-controls option:disabled{color:#888}.comparison[hidden]{display:none}
body[data-theme=hitam] #drawing-table{background:#0c0c0c;color:#eee}body[data-theme=hitam] #drawing-table td,body[data-theme=hitam] #drawing-table th{color:#eee;border-color:#444}body[data-theme=hitam] #drawing-table td:nth-child(5n){background:#0c0c0c;color:#999}body[data-theme=hitam] #drawing-table tbody tr:nth-last-child(5n+1){background:#242424}
body[data-theme=putih] #drawing-table{background:#fff;color:#111}body[data-theme=putih] #drawing-table tbody tr:nth-last-child(5n+1){background:#fff}body[data-theme=putih] #drawing-table td:nth-child(5n){color:#888}
@media(max-width:600px){.view-controls{grid-template-columns:1fr 1fr}.view-controls select{height:34px}#drawing-table td,#drawing-table th{font-size:clamp(9px,calc(20vw / var(--paito-columns,7)),13px)}}



/* Lightweight identity: inline SVG, system fonts, reserved header space. */
.site-header{min-height:106px;display:flex;align-items:center;justify-content:center;padding:24px 20px;background:#0d0b0b;border-top:3px solid #e51b23}
.brand{display:inline-flex;align-items:center;gap:13px;color:#fff;text-decoration:none}
.brand-icon{display:block;flex:none}
.brand-name{font-family:Arial,sans-serif;font-size:30px;font-weight:900;letter-spacing:1px;line-height:1.1}
.brand-name span,.footer-brand span{color:#f12a32}
.brand:focus-visible,.site-footer a:focus-visible{outline:2px solid #fff;outline-offset:7px}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:25px 28px;border-top:1px solid #582020;background:#100c0c}
.footer-brand{display:block;font-size:17px;font-weight:900;letter-spacing:.8px}
.site-footer small{display:block;color:#aaa;font-size:11px;margin-top:7px}
.site-footer a{color:#ccc;font-size:12px;text-decoration:none;padding:8px 0}
.site-footer a:hover{color:#fff}
.site-footer a span{margin-left:7px;color:#f12a32}
@media(max-width:600px){.site-header{min-height:94px;padding:20px 14px}.brand-name{font-size:25px}.brand-icon{width:38px;height:38px}.site-footer{padding:20px 16px}.footer-brand{font-size:14px}.site-footer a{font-size:11px}}