@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap";:root{--bg: #f6f4ef;--panel: #ffffff;--accent: #1b6ca8;--muted: #647182;--danger: #d64545;--border: #d7d5cf;--gold: #f3c766;--shadow: rgba(28, 75, 124, .12);--text: #1c2a3a;--radius: 14px;--focus: rgba(27, 108, 168, .4);--bg-pattern: linear-gradient(135deg, #1b6ca81f, #f3c7661f), radial-gradient(circle at 20% 20%, rgba(27, 108, 168, .08), transparent 35%), radial-gradient(circle at 80% 10%, rgba(243, 199, 102, .08), transparent 32%), repeating-linear-gradient( 45deg, rgba(27, 108, 168, .03) 0, rgba(27, 108, 168, .03) 18px, transparent 18px, transparent 36px ), repeating-linear-gradient( -45deg, rgba(243, 199, 102, .03) 0, rgba(243, 199, 102, .03) 18px, transparent 18px, transparent 36px );--tile-blue: #2d6cdf;--tile-yellow: #f2c94c;--tile-red: #e74c3c;--tile-black: #27303a;--tile-teal: #2ab3a7;--tile-empty: #f0f2f5;--grid-gap: 10px;font-family:Space Grotesk,system-ui,-apple-system,Segoe UI,Microsoft JhengHei,PingFang TC,Noto Sans TC,Heiti TC,Source Han Sans TC,sans-serif;color:var(--text);font-size:15px}*{box-sizing:border-box}.hidden{display:none!important}body{margin:0;min-height:100vh;background:var(--bg);position:relative;line-height:1.5}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:var(--bg-pattern);background-size:auto,auto,auto,160px 160px,160px 160px;opacity:1;pointer-events:none}.settings-menu{position:relative;z-index:10;display:inline-flex;align-items:center}.settings-menu-btn{background:#ffffffeb;color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.settings-menu-btn:hover{transform:translateY(-1px);border-color:#1b6ca859;box-shadow:0 10px 22px #00000024}.settings-menu-panel{position:absolute;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;gap:6px;background:#fffffff5;border:1px solid var(--border);border-radius:14px;padding:8px;box-shadow:0 16px 36px #00000029;min-width:220px}.settings-menu-section{display:flex;flex-direction:column;gap:8px}.settings-menu-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:4px 6px;color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.2px}.settings-menu-current{color:var(--text);font-weight:900}.settings-menu-items{display:flex;flex-direction:column;gap:6px}.settings-menu-item{width:100%;text-align:left;background:transparent;color:var(--text);border:1px solid transparent;border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.settings-menu-item:hover{transform:none;border-color:var(--border);background:#1b6ca80f;box-shadow:none}.settings-menu-item-active{border-color:#1b6ca838;background:#1b6ca814}.settings-menu-item-label{font-weight:800}.settings-menu-item-badge{font-weight:900;font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid rgba(27,108,168,.25);background:#1b6ca81f;color:var(--text)}.app-shell{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:24px;min-height:100vh;display:flex;flex-direction:column;gap:16px}.hero{padding:18px;font-size:15px}.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.hero-right{display:flex;align-items:center}.hero-text h1{margin:0;font-size:30px;letter-spacing:-.6px}.hero-text .subtitle{margin:4px 0 0;color:var(--muted)}.eyebrow{margin:0;color:var(--accent);font-weight:700;letter-spacing:1.4px;font-size:11px;text-transform:uppercase}.hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.badge{background:#1b6ca81f;color:var(--text);font-weight:700;letter-spacing:-.1px;font-size:13px;border-radius:999px;box-shadow:none}.seo-content{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:0 14px 34px var(--shadow)}.seo-content h2{margin:0;font-size:16px;letter-spacing:-.2px}.seo-lead{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}.seo-columns{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.seo-block h3{margin:0 0 6px;font-size:13px}.seo-block ul{margin:0;padding-left:18px;color:var(--text);font-size:13px;line-height:1.45}.seo-note{margin:12px 0 0;color:var(--muted);font-size:12px}@media (max-width: 720px){.seo-columns{grid-template-columns:1fr}}.topbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0}.subtitle{margin:4px 0 0;color:var(--muted);font-size:13px}.revert-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:0 14px 34px var(--shadow)}.revert-text{color:var(--text);font-weight:700;font-size:14px}.revert-controls{display:flex;gap:8px;align-items:center}.revert-controls select{min-width:200px;width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#f9f7f2;color:var(--text);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text) 50%),linear-gradient(135deg,var(--text) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:7px 7px,7px 7px;background-repeat:no-repeat}.revert-controls button{padding:8px 12px}.cache-prompt{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:0 14px 34px var(--shadow)}.cache-text{display:flex;flex-direction:column;gap:2px;color:var(--text);font-size:14px}.cache-text strong{font-size:15px}.cache-text span{color:var(--muted);font-size:13px}.cache-actions{display:flex;gap:8px;flex-wrap:wrap}.cache-actions .small{padding:8px 10px;font-size:13px}.action-group{display:flex;gap:8px;flex-wrap:wrap}button:focus-visible,select:focus-visible,.settings-menu-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:10px;padding:10px 14px;background:var(--accent);color:#fdfcf8;cursor:pointer;font-weight:700;letter-spacing:-.05px;font-size:13px;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}button:hover{transform:translateY(-1px);box-shadow:0 8px 18px #1b6ca859}button:active{transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}button.primary{background:var(--accent);color:#fdfcf8}button.danger{background:var(--danger);color:#fff7f4}button.danger:hover{box-shadow:0 8px 18px #d6454547}button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}button.ghost:hover{box-shadow:0 6px 14px #00000014}.summary{display:flex;flex-wrap:wrap;gap:8px;padding:0}.chip{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#f9f7f2;font-weight:600;color:var(--text);font-size:14px}.chip.score{font-weight:700;background:#1b6ca81f;border-color:#1b6ca859}.palette{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0}.palette button{width:46px;height:46px;border-radius:10px;border:2px solid #c8c1b1;box-shadow:0 4px 12px #0000001f;padding:0;filter:none;opacity:1;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,filter .12s ease,opacity .12s ease}.palette button:not(.active){opacity:.55;filter:brightness(.95) saturate(1.05);box-shadow:none;transform:none}.palette button:not(.active):hover{opacity:.8;filter:brightness(1.02) saturate(1.08);transform:translateY(-1px)}.palette button.active{outline:3px solid var(--gold);outline-offset:2px;opacity:1;transform:translateY(-2px);filter:brightness(1.08) saturate(1.12);box-shadow:0 6px 14px #0000002e}.board{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:28px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 14px 34px var(--shadow);display:flex;flex-direction:column;gap:18px}.panel-header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.panel-header h2,.panel-header h3{margin:0}.hint{margin:0;color:var(--muted);font-size:12px;letter-spacing:-.1px}.pattern-lines{display:flex;flex-direction:column;gap:12px}.pattern-row{display:grid;grid-auto-columns:1fr;gap:6px;align-items:center;grid-template-columns:60px repeat(5,1fr)}.row-label{color:var(--muted);font-size:13px;text-align:right;padding-right:8px;font-weight:700}.slots{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(40px,1fr))}.slot{height:44px;border-radius:10px;border:1px dashed #cbd3df;background:var(--tile-empty);position:relative;cursor:pointer;transition:border-color .12s ease,transform .12s ease,background .12s ease}.slot .tile{position:absolute;top:5px;right:5px;bottom:5px;left:5px;z-index:1}.slot:hover{border-color:var(--danger);transform:translateY(-1px)}.slot.filled{border-style:solid}.slot.filled .penalty-number{background:var(--danger);border-color:#ffffff47;color:#fff}.slot.filled{border-color:color-mix(in srgb,var(--danger) 70%,rgba(0,0,0,.35));outline:1px solid color-mix(in srgb,var(--danger) 65%,rgba(0,0,0,.35));outline-offset:2px;box-shadow:0 0 0 3px #ffffffd1,0 10px 20px #0000003d}.slot.filled .tile{filter:brightness(1.45) saturate(1.7) contrast(1.2)}.penalty-number{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:22px;padding:0 10px;border-radius:999px;background:#ffffffeb;border:1px solid rgba(0,0,0,.18);color:#8a1c12;font-weight:800;font-size:12px;pointer-events:none;z-index:2}.floor-line{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;padding-top:6px}.wall-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--grid-gap);padding:10px;background:linear-gradient(135deg,#fff,#f9f7f2);border-radius:14px;border:1px solid var(--border)}.wall-cell{position:relative;padding-top:100%;border-radius:10px;overflow:hidden;background:#fff;border:1px solid #dfe4eb;cursor:pointer}.wall-cell .inner{position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:8px;background:#1b6ca80f;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}.wall-cell.standard:not(.filled){filter:brightness(.88) saturate(.65)}.wall-cell.standard .inner{opacity:.8;font-weight:700;color:var(--accent)}.wall-cell.filled{border-color:#1b6ca859}.wall-cell.pending{border-color:#0000008c;outline:2px solid rgba(0,0,0,.5);outline-offset:2px;filter:brightness(1.18) saturate(1.25) contrast(1.08);box-shadow:0 0 0 4px #ffffffd9,0 0 0 9px #f3c76661,0 16px 30px #00000047}.wall-grid.has-pending .wall-cell:not(.pending){filter:brightness(.62) saturate(.85) contrast(1.05) opacity(.65)}.wall-grid.has-pending .wall-cell:not(.pending):hover{filter:brightness(.82) saturate(.95) contrast(1.05) opacity(.92)}.wall-cell.standard.pending{filter:brightness(1.15);border-color:#1b6ca873}.wall-cell.recent{filter:brightness(1.06);border-color:#1b6ca873}.log{background:#fff;border-radius:12px;border:1px solid var(--border);padding:12px}.log-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px}.message{padding:16px 18px;background:#1b6ca814;border:1px solid rgba(27,108,168,.3);border-radius:12px;color:var(--accent);min-height:28px}.tile{width:100%;height:100%;border-radius:8px}.tile.blue{background:var(--tile-blue);background-image:url(../images/blue.jpeg);background-size:cover}.tile.yellow{background:var(--tile-yellow);background-image:url(../images/yellow.jpeg);background-size:cover}.tile.red{background:var(--tile-red);background-image:url(../images/red.jpeg);background-size:cover}.tile.black{background:var(--tile-black);background-image:url(../images/black.jpeg);background-size:cover}.tile.teal{background:var(--tile-teal);background-image:url(../images/white.jpeg);background-size:cover}.tile.empty{background:transparent}.floor-line .tile{background-image:none!important}.floor-line .slot .tile{inset:auto;width:18px;height:18px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:999px;background:transparent!important;filter:none}.floor-line .slot.filled .tile{background:var(--danger)!important;opacity:.95}.tile-bg-blue{background:var(--tile-blue) url(../images/blue.jpeg) center/cover}.tile-bg-yellow{background:var(--tile-yellow) url(../images/yellow.jpeg) center/cover}.tile-bg-red{background:var(--tile-red) url(../images/red.jpeg) center/cover}.tile-bg-black{background:var(--tile-black) url(../images/black.jpeg) center/cover}.tile-bg-teal{background:var(--tile-teal) url(../images/white.jpeg) center/cover}.tile-bg-empty{background:#e0e4ea}@media (max-width: 980px){.board{grid-template-columns:1fr}}@media (max-width: 600px){.pattern-row{grid-template-columns:50px repeat(5,1fr)}}.site-footer{margin-top:auto;text-align:center;color:var(--muted);font-size:13px;padding:12px 0 4px}@media (max-width: 820px){:root{font-size:14px}.app-shell{padding:16px;gap:14px}.hero{gap:10px;padding:0}.hero-text h1{font-size:26px}.topbar{justify-content:flex-start}.hero-top{flex-direction:column;align-items:flex-start}.hero-right,.settings-menu{width:100%}.settings-menu-btn{width:100%;justify-content:center}.settings-menu-panel{left:0;right:0;width:100%;min-width:0}.cache-prompt{flex-direction:column;align-items:flex-start}.cache-actions{width:100%}.cache-actions button{flex:1 1 140px}.revert-bar{flex-direction:column;align-items:flex-start}.revert-controls{width:100%}.revert-controls select{flex:1 1 auto}.action-group{width:100%;gap:10px}.action-group button{flex:1 1 120px}.summary{gap:6px}.panel{padding:14px;gap:14px}.board{row-gap:18px;column-gap:16px}.floor-line{grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:10px}.wall-grid{padding:8px;gap:8px}}@media (max-width: 560px){.hero-text h1{font-size:22px}.chip{padding:8px 10px}button{width:100%;min-width:0}.action-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}.action-group button{height:100%}.revert-controls{width:100%;gap:6px}.revert-controls select{width:100%}.cache-actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.wall-grid{gap:6px;padding:6px}.panel{padding:16px 14px}.floor-line{gap:8px}}.tutorial-tooltip{background:#fff;border-radius:12px;padding:20px;max-width:340px;box-shadow:0 12px 36px #00000040,0 0 0 1px #0000000d;font-family:inherit;position:relative}.tutorial-tooltip-close{position:absolute;top:12px;right:12px;background:transparent;border:none;cursor:pointer;color:#999;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s,color .2s}.tutorial-tooltip-close:hover{background:#f0f0f0;color:#333}.tutorial-tooltip-body{margin-top:8px;margin-bottom:24px;font-size:1rem;line-height:1.5;color:#333}.tutorial-tooltip-footer{display:flex;justify-content:space-between;align-items:center}.tutorial-dots{display:flex;gap:6px}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:#eee;transition:background .2s}.tutorial-dot.active{background:#0097e6}.tutorial-buttons{display:flex;gap:8px}.tutorial-btn-back{background:transparent;border:none;color:#666;font-weight:600;cursor:pointer;padding:8px 12px;border-radius:6px;font-size:.9rem}.tutorial-btn-back:hover{background:#f5f5f5;color:#333}.tutorial-btn-next{background:#0097e6;border:none;color:#fff;font-weight:600;cursor:pointer;padding:8px 16px;border-radius:6px;box-shadow:0 2px 4px #0097e64d;font-size:.9rem;transition:transform .1s}.tutorial-btn-next:active{transform:scale(.96)}