:root{--ink:#35271d;--ink-soft:#705c47;--line:#c9a96d;--line-dark:#8b632d;--paper:#e8cf9e;--paper-light:#f6ead0;--panel:#fff7e2d6;--scarlet:#9d3929;--teal:#1d7882}*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{min-width:320px;color:var(--ink);background:radial-gradient(ellipse at 50% -18%, #ffffff9e, transparent 46rem), radial-gradient(circle at 8% 19%, #9d632a2e, transparent 22rem), radial-gradient(circle at 93% 68%, #7b461b21, transparent 26rem), repeating-linear-gradient(0deg, #532e1207 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, #ffffff0d 0 2px, transparent 2px 7px), var(--paper);margin:0;font-family:Microsoft YaHei UI,Microsoft YaHei,system-ui,sans-serif}button{font:inherit}button:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #2f8ba0}.app-shell{width:min(1150px,100% - 34px);margin:0 auto;padding:42px 0 60px;position:relative}.app-shell:before,.app-shell:after{z-index:-1;content:"";border:1px solid #6d43181f;border-radius:50%;width:230px;height:230px;position:absolute}.app-shell:before{top:156px;left:-124px;box-shadow:0 0 0 19px #9d6a340b,0 0 0 42px #9d6a3406}.app-shell:after{bottom:88px;right:-110px;box-shadow:0 0 0 24px #9d6a3409}.topbar{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:23px;padding:0 5px 26px;display:flex;position:relative}.topbar:after{content:"";background:linear-gradient(90deg,#0000,#9e6f31 12%,#ddc18b 38%,#9e6f31 50%,#ddc18b 62%,#9e6f31 88%,#0000);border-radius:999px;height:3px;position:absolute;bottom:0;left:0;right:0}.title-stack{padding-left:25px;position:relative}.title-ornament{color:#9f7135;text-shadow:0 1px #fff1cf;font-size:.95rem;position:absolute;top:2px;left:0}.eyebrow,.section-kicker{color:#95692f;letter-spacing:.12em;margin:0;font-size:.7rem;font-weight:800}h1,h2,p{margin-top:0}h1{color:#3f2919;letter-spacing:.075em;text-shadow:0 2px #ffeac0,0 3px 5px #512f151f;margin:6px 0 8px;font-family:inherit;font-size:clamp(2.15rem,5vw,3.35rem);font-weight:900}h2{color:#4b311e;letter-spacing:.035em;margin:5px 0 0;font-family:inherit;font-size:1.5rem;font-weight:900}.subtitle{color:var(--ink-soft);margin:0;font-size:.95rem}.header-actions{align-items:center;gap:12px;padding-top:8px;display:flex}.page-nav{background:#fff9e894;border:1px solid #a577376b;border-radius:9px;align-items:center;gap:3px;padding:3px;display:inline-flex;box-shadow:inset 0 1px #ffffff9e}.page-link{color:#73532a;border-radius:6px;padding:6px 9px;font-size:.78rem;font-weight:900;line-height:1;text-decoration:none;transition:background .12s,color .12s,transform .12s}.page-link:hover{color:#4f351b;background:#ecd7adb8}.page-link.active{color:#fff6db;background:linear-gradient(#a96c2a,#754317);box-shadow:inset 0 1px #ffffff4d}.save-status{color:#83694a;white-space:nowrap;align-items:center;gap:6px;font-size:.78rem;font-weight:700;display:inline-flex}.save-status i{background:#53945d;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #53945d26}.quiet-button,.secondary-button,.delete-button{cursor:pointer;color:#684820;background:linear-gradient(#fff9e8,#f1deba);border:1px solid #ad7d3b;transition:transform .14s,filter .14s,box-shadow .14s;box-shadow:inset 0 1px #ffffffbf,0 2px #6848201f}.quiet-button{white-space:nowrap;border-radius:9px;padding:9px 15px;font-weight:800}.quiet-button:hover,.secondary-button:hover,.delete-button:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:inset 0 1px #fffc,0 4px #68482021}.notice{color:#5e4324;background:linear-gradient(100deg,#fff8dde0,#f9e6bcb8);border:1px solid #cfaa64;border-left:4px solid #a76b28;border-radius:10px;align-items:center;gap:12px;margin-bottom:21px;padding:12px 16px 12px 13px;font-size:.92rem;display:flex;box-shadow:0 5px 14px #653a140f}.notice p{margin:0}.notice strong{color:#4d3921}.notice-mark{color:#fff1cb;background:linear-gradient(#bf7a2d,#94561e);border:1px solid #7a5220;border-radius:5px;flex:none;place-items:center;width:24px;height:24px;font-family:inherit;font-weight:900;display:grid}.workspace-grid{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}.panel,.history-section,.method-note{border:1px solid var(--line);background:var(--panel);border-radius:16px;box-shadow:inset 0 2px #fff9,0 16px 30px #502f1317}.panel{padding:24px;position:relative;overflow:hidden}.panel:before{content:"";background:linear-gradient(90deg,#b27b35,#f1d39c 22%,#a56e2d 50%,#f1d39c 78%,#b27b35);border-radius:0 0 6px 6px;height:4px;position:absolute;top:0;left:21px;right:21px}.panel-heading,.history-heading{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.row-counter,.candidate-count{color:#70471b;background:linear-gradient(135deg,#fae9bd,#e2bd77);border:1px solid #ba8a47;border-radius:8px;place-items:center;min-width:47px;height:43px;font-family:inherit;font-size:1.25rem;font-weight:800;display:grid;box-shadow:inset 0 0 0 2px #fff8e187}.candidate-count{color:#2e6135;background:linear-gradient(135deg,#e7f1c9,#afd198);border-color:#7aa26d;min-width:63px;font-size:1.55rem}.candidate-count.error{color:#882f29;background:linear-gradient(135deg,#f7dbcc,#e8ae9e);border-color:#c67767}.entry-selection-row{grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;max-width:100%;margin:8px 0 20px;padding-bottom:4px;display:grid;overflow:visible}.positions{grid-template-columns:repeat(4,72px);align-items:start;gap:20px;display:grid}.position-picker{background:0 0;border:0;border-radius:0;justify-items:center;min-inline-size:0;margin:0;padding:0;display:grid}.position-picker:focus-within{box-shadow:none;border-color:#0000}.position-label{color:#604222;white-space:nowrap;place-items:center;width:72px;min-height:24px;margin:0;padding:0 0 4px;font-size:.9rem;font-weight:900;display:grid}.color-options{grid-template-columns:1fr;justify-items:center;gap:2px;display:grid}.color-option{cursor:pointer;color:#fff8df;width:72px;height:72px;box-shadow:none;background:0 0;border:0;border-radius:7px;place-items:center;padding:0;font-size:.62rem;font-weight:800;transition:transform .14s,filter .14s;display:grid;position:relative}.color-option b{z-index:1;color:#fff8df;background:#2d1b0ec7;border:1px solid #2d1b0ed1;border-radius:3px;min-width:14px;padding:1px 3px;font-family:inherit;font-size:.62rem;font-weight:800;line-height:1.1;position:absolute;bottom:1px;right:1px;box-shadow:0 1px 1px #0000004d}.color-option span{background-image:url(/dst-gem-sprite.png);background-size:1128px;background-position:var(--sprite-tile-x) -36px;filter:drop-shadow(0 2px 1px #2f1d0f59);width:64px;height:64px;display:block}.color-option:hover{filter:brightness(1.08);transform:translateY(-2px)}.color-option:not(.selected){filter:brightness(.68)saturate(.78)}.color-option:not(.selected):hover{filter:brightness(.88)saturate(.9)}.color-option.selected{filter:drop-shadow(0 0 7px color-mix(in srgb, var(--swatch) 85%, transparent));transform:translateY(-1px)scale(1.04)}.color-option.selected span{filter:drop-shadow(0 0 3px color-mix(in srgb, var(--swatch) 75%, transparent)) drop-shadow(0 2px 1px #2f1d0f4d)}.score-controls{grid-template-columns:minmax(0,1fr);align-self:start;gap:9px;width:100%;padding-bottom:2px;display:grid}.count-control{background:linear-gradient(145deg,#ffffffb3,#f7e8ca7a);border:1px solid #d9c39b;border-radius:10px;padding:12px;position:relative;overflow:hidden}.count-control:before{content:"";background:#a58a5b;border-radius:0 0 2px 2px;height:2px;position:absolute;top:0;left:9px;right:9px}.count-control.exact:before{background:#2d9aa3}.count-control.misplaced:before{background:#b28c26}.count-label{color:#6c5439;white-space:nowrap;align-items:center;gap:7px;margin:1px 0 10px;font-size:.94rem;font-weight:900;display:flex}.result-icon{background-image:url(/dst-result-icons.png);background-repeat:no-repeat;background-size:200% 100%;border:0;border-radius:50%;flex:none;width:21px;height:21px;font-size:0;line-height:1;display:inline-block}.result-icon.exact{background-position:0 0}.result-icon.misplaced{background-position:100% 0}.count-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.count-options button{cursor:pointer;color:#704d26;background:#fffcf3d1;border:1px solid #78572b47;border-radius:6px;min-height:39px;font-family:inherit;font-size:1.04rem;font-weight:900;line-height:1;transition:transform .12s,filter .12s,background .12s}.count-options button:hover:not(:disabled){filter:brightness(.97);transform:translateY(-1px)}.count-options button.selected{color:#f5fffa;background:linear-gradient(#32a5a8,#176c79);border-color:#0000;box-shadow:inset 0 1px #ffffff59,0 1px 2px #0f484e42}.count-control.misplaced .count-options button.selected{color:#fffbe3;background:linear-gradient(#c3a13b,#806817);box-shadow:inset 0 1px #ffffff59,0 1px 2px #5d480e40}.count-options button:disabled{cursor:not-allowed;color:#b7aa96;opacity:.58;background:#e0d6c273}.inline-count-options{grid-template-columns:repeat(5,35px);gap:3px}.inline-count-options button{min-height:29px;padding:0;font-size:.82rem}.inline-count-options.misplaced button.selected{color:#fffbe3;background:linear-gradient(#c3a13b,#806817);box-shadow:inset 0 1px #ffffff59,0 1px 2px #5d480e40}.selected-score{background:#fffcf294;border:1px dashed #c7aa76;border-radius:9px;grid-column:1/-1;grid-template-columns:minmax(242px,max-content) minmax(240px,1fr);gap:14px;padding:10px 12px;display:grid}.selected-gems,.selected-feedback{min-width:0}.selected-score p{color:#785a34;letter-spacing:.04em;margin:0 0 7px;font-size:.76rem;font-weight:900}.selected-gems .code-chips{gap:3px}.selected-feedback{grid-template-rows:auto 1fr 1fr;gap:5px;display:grid}.selected-feedback>p{margin-bottom:2px}.feedback-input-row{grid-template-columns:minmax(42px,1fr) auto;align-items:center;gap:7px;display:grid}.feedback-result{color:#315e60;background:#d3f2ebb3;border-radius:6px;justify-content:flex-start;align-items:center;min-height:29px;padding:4px 8px;font-size:.78rem;font-weight:900;display:flex}.feedback-result.misplaced{color:#6c591c;background:#f9edb0a8}.result-icon-list{justify-content:flex-start;align-items:center;gap:4px;min-width:0;display:inline-flex}.result-icon-list .result-icon{width:22px;height:22px}.primary-button{cursor:pointer;color:#fff7dc;letter-spacing:.04em;background:linear-gradient(#c45b42,#903528);border:1px solid #702c21;border-radius:8px;width:100%;padding:12px 14px;font-weight:800;transition:filter .12s,transform .12s;box-shadow:inset 0 1px #ffffff52,inset 0 -2px #49181354,0 3px #57281329}.score-controls .primary-button,.score-controls .inline-note,.sidebar-recommendation{grid-column:1/-1}.primary-button:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;opacity:.5}.inline-note{color:#875a34;margin:0;font-size:.82rem}.analysis-panel{flex-direction:column;min-height:0;display:flex}.recommendation-card,.solution-card{background:linear-gradient(135deg,#fbf7db,#e0eec9);border:1px solid #9cad72;border-radius:12px;margin-top:24px;padding:18px;position:relative;overflow:hidden;box-shadow:inset 0 1px #fffc,0 6px 16px #49682f14}.recommendation-card:after,.solution-card:after{content:"";border:16px solid #6791491a;border-radius:50%;width:110px;height:110px;position:absolute;top:-30px;right:-26px}.solution-card{background:linear-gradient(135deg,#e9f6dc,#c8e8be);border-color:#6e9c72}.recommendation-label,.solution-card p{z-index:1;color:#4f743f;letter-spacing:.08em;margin-bottom:13px;font-size:.78rem;font-weight:900;position:relative}.recommendation-copy{z-index:1;color:#547052;margin:15px 0;font-size:.88rem;line-height:1.55;position:relative}.secondary-button{z-index:1;color:#46633b;background:linear-gradient(#fffef7,#edf2df);border-color:#8eaa77;border-radius:7px;padding:9px 13px;font-size:.88rem;font-weight:800;position:relative}.sidebar-recommendation{margin-top:0;padding:13px}.sidebar-recommendation .recommendation-label{margin-bottom:7px}.sidebar-recommendation .recommendation-copy{margin:8px 0;font-size:.8rem}.sidebar-recommendation .secondary-button{padding:7px 10px;font-size:.8rem}.code-chips{z-index:1;vertical-align:middle;flex-wrap:wrap;gap:7px;display:inline-flex;position:relative}.color-chip{color:#fff8df;place-items:center;width:72px;height:72px;font-family:inherit;font-size:.62rem;font-weight:800;display:inline-grid;position:relative}.color-chip b{z-index:1;color:#fff8df;background:#2d1b0ec7;border:1px solid #2d1b0ed1;border-radius:3px;min-width:14px;padding:1px 3px;font-family:inherit;font-size:.62rem;font-weight:800;line-height:1.1;position:absolute;bottom:1px;right:1px;box-shadow:0 1px 1px #0000004d}.color-chip-small{width:54px;height:54px}.color-swatch{background-image:url(/dst-gem-sprite.png);background-size:1128px;background-position:var(--sprite-tile-x) -36px;filter:drop-shadow(0 2px 1px #2f1d0f59);width:64px;height:64px;display:block}.color-chip-small .color-swatch{transform:scale(.75)}.color-chip-small b{font-size:.57rem;bottom:-1px;right:-1px}.candidate-list{background:linear-gradient(145deg,#fffdf5c7,#f6e8c985);border:1px solid #dcc69a;border-radius:11px;margin-top:22px;padding:12px;box-shadow:inset 0 1px #ffffffd1}.candidate-list-heading{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.candidate-list-heading p{color:#73542d;letter-spacing:.06em;margin:0;font-size:.82rem;font-weight:900}.candidate-list-heading span{color:#587047;background:#dcebc8;border-radius:999px;padding:3px 8px;font-size:.72rem;font-weight:900}.candidate-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px;display:grid}.candidate-list .code-chips{background:#ffffff9e;border:1px solid #b1905747;border-radius:7px;justify-content:center;width:100%;padding:4px;box-shadow:inset 0 1px #ffffffd1}.candidate-list .code-chips:hover{background:#fffdf6;border-color:#c49d5b}.candidate-hint,.empty-state,.history-empty{color:#795f41;background:#fffaee8a;border:1px dashed #d0af75;border-radius:10px;margin:auto 0 0;padding:14px;line-height:1.6}.empty-state{color:#863e34;background:#fff1e9;border-color:#d39b91}.history-section{padding:22px 24px}.history-section-top{margin:0 0 20px}.history-heading{align-items:end;margin-bottom:16px}.history-heading>p{color:#80694d;text-align:right;margin:0;font-size:.84rem}.history-empty{margin:0}.history-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.history-list li{background:linear-gradient(100deg,#fffdf5d6,#f7ebd18f);border:1px solid #dfccaa;border-radius:10px;grid-template-columns:31px minmax(0,1fr) 53px 53px auto;align-items:center;gap:10px;padding:8px 9px;transition:background .12s,border-color .12s,transform .12s;display:grid;box-shadow:inset 0 1px #ffffffb8}.history-list li:hover{background:#fffdf6;border-color:#cda462;transform:translateY(-1px)}.attempt-number{color:#785127;background:radial-gradient(circle at 35% 30%,#fff2ca,#e5c487);border:1px solid #af7d3e;border-radius:50%;place-items:center;width:29px;height:29px;font-family:inherit;font-size:.83rem;font-weight:900;display:grid}.result-summary{color:#355f60;background:#d6f2eba3;border-radius:6px;justify-content:center;align-items:center;gap:4px;min-height:31px;padding:3px 5px;font-size:.86rem;font-weight:900;display:inline-flex}.result-summary.misplaced{color:#6e5b1d;background:#f8ecac99}.result-summary .result-icon{width:18px;height:18px;font-size:.73rem}.result-summary strong{text-align:center;min-width:11px}.delete-button{color:#885044;background:linear-gradient(#fffaf7,#f8e6dd);border-color:#d3a69c;border-radius:6px;padding:6px 10px;font-family:inherit;font-size:.78rem;font-weight:800}.method-note{color:#6c5945;margin-top:20px;padding:15px 18px}.method-note summary{cursor:pointer;color:#614a2c;font-weight:800}.method-note p{margin:11px 0 0;line-height:1.65}.conflict-backdrop{z-index:100;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#2b1b1194;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.conflict-dialog{color:#593721;text-align:center;background:linear-gradient(145deg,#fff8e8,#f1d7ad);border:1px solid #c98e55;border-radius:16px;width:min(410px,100%);padding:24px;animation:.16s ease-out conflict-in;box-shadow:inset 0 1px #ffffffd9,0 22px 60px #21130b59}.conflict-mark{color:#fff4d9;background:linear-gradient(#c75e43,#8d3127);border:1px solid #8b392b;border-radius:50%;place-items:center;width:42px;height:42px;margin:0 auto 11px;font-size:1.45rem;font-weight:900;display:grid;box-shadow:inset 0 1px #ffffff4d,0 5px 12px #742b1f33}.conflict-dialog h2{margin:5px 0 10px}.conflict-dialog>p:last-of-type{color:#76543a;margin:0;line-height:1.65}.conflict-dialog .primary-button{margin-top:17px}@keyframes conflict-in{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.practice-shell{max-width:970px}.practice-panel{padding-bottom:26px}.practice-heading{margin-bottom:17px}.practice-notice{margin-bottom:20px}.rules-card{background:linear-gradient(120deg,#fff8e0e6,#f7e3b8b8);border:1px solid #cba665;border-radius:14px;margin:0 0 20px;padding:18px 20px;box-shadow:inset 0 1px #ffffffb8,0 8px 20px #5330120f}.rules-card h2{margin-bottom:12px;font-size:1.28rem}.rules-card ul{color:#604326;gap:7px;margin:0;padding:0;font-size:.9rem;font-weight:700;line-height:1.45;list-style:none;display:grid}.rules-card li{align-items:center;gap:8px;display:flex}.rules-card li:before{color:#b27829;content:"❯";font-size:.86rem}.rules-card .result-icon{width:22px;height:22px;margin-left:2px}.practice-prompt{color:#71583d;margin:0 0 13px;font-size:.9rem}.practice-choice-grid{grid-template-columns:repeat(4,minmax(140px,1fr));align-items:start;gap:16px;display:grid}.practice-position{background:linear-gradient(145deg,#fffdf4d1,#f6e6c270);border:1px solid #d9be88;border-radius:10px;justify-items:center;min-inline-size:0;padding:9px 6px;display:grid;box-shadow:inset 0 1px #ffffffc7}.practice-color-options{grid-template-columns:repeat(2,72px);gap:2px 3px}.practice-submit-row{border-top:1px dashed #d8bc85;grid-template-columns:minmax(0,1fr) minmax(190px,.55fr);align-items:center;gap:14px;margin-top:16px;padding-top:15px;display:grid}.practice-current-guess{align-items:center;gap:10px;min-width:0;display:flex}.practice-current-guess>span{color:#785a34;flex:none;font-size:.78rem;font-weight:900}.practice-current-guess .code-chips{gap:1px}.practice-actions{grid-template-columns:minmax(0,1fr);gap:8px;display:grid}.practice-submit-row .primary-button{min-height:48px}.reveal-button{cursor:pointer;color:#76522a;white-space:nowrap;background:linear-gradient(#fff8e7,#efdcb6);border:1px solid #b28a56;border-radius:7px;padding:0 12px;font-size:.78rem;font-weight:900;box-shadow:inset 0 1px #fffc,0 2px #6848201f}.reveal-button:hover{filter:brightness(1.04)}.practice-reveal-row{color:#7a6042;border-top:1px dashed #d8bc85;justify-content:center;align-items:center;gap:10px;margin-top:12px;padding-top:12px;font-size:.78rem;font-weight:800;display:flex}.practice-reveal-row .reveal-button{min-height:36px;padding-inline:16px}.practice-finish{background:linear-gradient(135deg,#f4f5d4,#dcecc7);border:1px solid #99ad6c;border-radius:11px;justify-items:start;gap:10px;padding:17px;display:grid}.practice-finish.failed{background:linear-gradient(135deg,#fff0df,#f5d5bf);border-color:#c48d7a}.practice-finish.revealed{background:linear-gradient(135deg,#fff5d9,#f1dfb6);border-color:#b89b64}.practice-finish p{color:#526c3f;margin:0;font-size:.82rem;font-weight:900}.practice-finish.failed p{color:#874b3d}.practice-finish.revealed p{color:#765328}.practice-finish .practice-finish-title{color:#375a37;font-size:1rem}.practice-finish.failed .practice-finish-title{color:#813f32}.practice-finish.revealed .practice-finish-title{color:#68451f}.practice-finish .secondary-button{margin-top:2px}.practice-history{margin-top:20px}.practice-attempts{gap:8px;margin:0;padding:0;list-style:none;display:grid}.practice-attempts li{background:linear-gradient(100deg,#fffdf5d6,#f7ebd18f);border:1px solid #dfccaa;border-radius:10px;grid-template-columns:31px minmax(0,1fr) minmax(112px,auto);align-items:center;gap:12px;padding:8px 10px;display:grid;box-shadow:inset 0 1px #ffffffb8}.practice-result-icons{background:linear-gradient(90deg,#d1f1eaa8,#faedb2a3);border-radius:7px;justify-content:flex-start;align-items:center;gap:4px;min-width:112px;padding:6px 8px;display:inline-flex}.practice-result-icons .result-icon{width:22px;height:22px}.no-result-mark{color:#7e6b54;font-size:.78rem;font-style:normal;font-weight:800}@media (max-width:800px){.app-shell{width:calc(100% - 20px);padding:25px 0 38px}.app-shell:before,.app-shell:after{display:none}.topbar{flex-direction:column;gap:14px}.header-actions{justify-content:space-between;width:100%;padding-top:0}h1{font-size:2.2rem}.analysis-panel{min-height:auto}.candidate-list{margin-top:22px}.selected-score{grid-template-columns:1fr}.entry-selection-row{grid-template-columns:1fr;gap:16px;overflow:visible}.positions{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}.position-label{width:64px;font-size:.78rem}.color-option{width:64px;height:64px}.color-option span{transform:scale(.88)}.score-controls{width:100%;min-width:0}.count-control{padding:10px}.practice-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:14px 8px;width:100%}.positions.practice-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.positions .practice-color-options{grid-template-columns:repeat(2,64px)}}@media (max-width:560px){.app-shell{width:calc(100% - 16px);padding:16px 0 28px}.topbar{align-items:stretch;gap:10px;margin-bottom:13px;padding:0 2px 17px}.title-stack{text-align:center;padding-left:0}.title-ornament{display:none}.eyebrow{text-align:center}h1{letter-spacing:.045em;text-align:center;margin:5px 0 6px;font-size:2rem}.subtitle{text-align:center;max-width:31rem;margin-inline:auto;font-size:.88rem;line-height:1.5}.header-actions{grid-template-columns:1fr auto;gap:8px;display:grid}.page-nav{grid-column:1/-1;grid-template-columns:1fr 1fr;display:grid}.page-link{text-align:center;padding:8px 9px}.header-actions>.quiet-button{justify-self:end}.practice-shell .header-actions{grid-template-columns:1fr}.practice-shell .header-actions .quiet-button{grid-column:1/-1;justify-self:stretch;width:100%}.save-status{place-self:center start;font-size:.7rem}.notice{align-items:flex-start;gap:9px;margin-bottom:12px;padding:10px 11px 10px 9px;font-size:.84rem;line-height:1.55}.notice-mark{width:22px;height:22px}.workspace-grid{gap:12px}.panel,.history-section{border-radius:12px;padding:15px 12px}.panel-heading,.history-heading{gap:10px}.panel-heading{align-items:center}h2{font-size:1.35rem}.history-section-top{margin-bottom:12px}.history-heading{margin-bottom:10px}.history-empty{text-align:center;padding:11px;line-height:1.5}.entry-selection-row{gap:10px;margin:4px 0 12px;padding-bottom:0}.positions{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.position-picker{padding-inline:0}.color-options{gap:2px}.position-label{width:58px;min-height:21px;padding-bottom:2px;font-size:.7rem}.color-option{width:58px;height:58px}.color-option span{transform:scale(.78)}.color-option b{font-size:.55rem;bottom:-1px;right:-1px}.score-controls{gap:7px;min-width:0}.count-control{padding:9px}.count-label{gap:5px;margin-bottom:7px;font-size:.8rem}.count-label .result-icon{width:18px;height:18px}.count-options{gap:3px}.count-options button{min-height:34px;font-size:.9rem}.selected-score{gap:9px;padding:9px}.selected-gems,.selected-feedback>p{text-align:center}.selected-gems .code-chips{justify-content:center}.feedback-result{text-align:center;justify-content:center}.sidebar-recommendation{text-align:center}.sidebar-recommendation .code-chips{justify-content:center;display:flex}.candidate-list{margin-top:12px;padding:9px}.candidate-hint,.empty-state{text-align:center;padding:11px}.history-heading{text-align:center;flex-direction:column;align-items:center}.history-heading>p{text-align:center}.history-list{overflow:visible}.history-list li{grid-template-columns:42px minmax(0,1fr) 40px;gap:4px 5px;min-width:0;padding:7px 6px}.history-list .attempt-number{grid-area:1/1;justify-self:center}.history-list .code-chips{flex-wrap:nowrap;grid-area:1/2/span 2;justify-content:center;align-self:center;gap:1px}.history-list .color-chip-small,.practice-attempts .color-chip-small{width:clamp(35px,11vw,44px);height:clamp(35px,11vw,44px)}.history-list .color-chip-small .color-swatch,.practice-attempts .color-chip-small .color-swatch{transform:scale(.58)}.history-list .result-summary.exact{grid-area:1/3}.history-list .result-summary.misplaced{grid-area:2/3}.history-list .delete-button{border-radius:999px;grid-area:2/1;justify-self:center;min-width:40px;padding:4px 5px;font-size:.68rem;line-height:1}.practice-notice{margin-bottom:12px}.rules-card{margin-bottom:12px;padding:14px 12px}.rules-card h2{text-align:center;margin-bottom:9px}.rules-card ul{gap:6px;font-size:.84rem}.practice-heading{margin-bottom:12px}.practice-prompt{text-align:center;margin-bottom:10px}.practice-choice-grid,.positions.practice-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 5px}.practice-position{padding:6px 3px}.practice-color-options,.positions .practice-color-options{grid-template-columns:repeat(2,58px);gap:2px}.practice-submit-row{grid-template-columns:1fr;gap:9px;margin-top:12px;padding-top:12px}.practice-current-guess{text-align:center;flex-direction:column;justify-content:center;gap:5px}.practice-current-guess .code-chips{justify-content:center}.practice-actions{grid-template-columns:minmax(0,1fr)}.reveal-button{padding:0 10px}.practice-history{margin-top:12px}.practice-attempts{padding-bottom:0;overflow:visible}.practice-attempts li{grid-template-columns:26px minmax(0,1fr) auto;gap:4px;min-width:0;padding:7px 6px}.practice-attempts .attempt-number{grid-area:1/1;width:26px;height:26px}.practice-attempts .code-chips{flex-wrap:nowrap;grid-area:1/2;justify-content:center;gap:1px}.practice-result-icons{grid-area:1/3;justify-content:center;gap:2px;width:auto;min-width:0;padding:5px 6px}.practice-result-icons .result-icon{width:17px;height:17px}.method-note{text-align:center;margin-top:12px;padding:12px 14px}.method-note p{text-align:left;margin-top:9px;line-height:1.55}}@media (max-width:385px){h1{font-size:1.82rem}.subtitle{font-size:.82rem}.score-controls{gap:7px}.count-control{padding:9px}.position-label{font-size:.72rem}.practice-result-icons{gap:1px;padding:4px}.practice-result-icons .result-icon{width:15px;height:15px}}