.hp-main{--hp-ink:#23483d;--hp-wash:#e6ebdc;--hp-paper:#fffef7;--hp-accent:#567745;max-width:1120px;margin:0 auto;padding:28px 28px 64px;color:var(--hp-ink)}
.color-pour-page{background:#fbf6ef}.cp-main{--hp-ink:#59493d;--hp-wash:#f1e7db;--hp-paper:#fffcf6;--hp-accent:#86604b}
.hp-crumb{display:flex;justify-content:space-between;gap:16px;font-size:12px}.hp-crumb span,.hp-kicker{font-size:10px;font-weight:750;letter-spacing:.15em;line-height:1.7}.hp-kicker{display:block;margin:0 0 9px}.hp-crumb a{text-decoration:none}
.hp-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:44px 0 34px}.hp-heading h1{font:600 clamp(42px,6.4vw,76px)/1.04 Georgia,serif;letter-spacing:-.055em;margin:10px 0 0}.hp-heading em{font-weight:400;color:var(--hp-accent)}.hp-heading>p{font-size:17px;line-height:1.65;margin:0 18px 8px 0}
.hp-room{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:50px;align-items:start}.hp-player{background:var(--hp-paper);border:1px solid var(--hp-wash);border-radius:24px;padding:24px;box-shadow:0 15px 36px #263e3010}.hp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 22px}.hp-stats span,.cp-move-stat span{display:block;font-size:9px;letter-spacing:.12em;font-weight:700}.hp-stats strong{display:block;font:500 28px/1.4 Georgia,serif;font-variant-numeric:tabular-nums}
.bg-board-shell{padding:12px;background:#d4dfc8;border-radius:16px}.bg-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.bg-cell{aspect-ratio:1;min-height:0;min-width:0;border:0;border-radius:5px;background:#ecf0e4;cursor:pointer;box-shadow:inset 0 1px 3px #173f3610;padding:0;position:relative}.bg-cell[data-color="1"],.bg-mini-cell[data-color="1"]{background:#78976c}.bg-cell[data-color="2"],.bg-mini-cell[data-color="2"]{background:#bd9480}.bg-cell[data-color="3"],.bg-mini-cell[data-color="3"]{background:#9691b6}.bg-cell[data-color="4"],.bg-mini-cell[data-color="4"]{background:#b6a367}.bg-cell[data-color="5"],.bg-mini-cell[data-color="5"]{background:#658f97}.bg-cell[data-color="6"],.bg-mini-cell[data-color="6"]{background:#527c65}.bg-cell:not([data-color="0"]){box-shadow:inset 0 3px 0 #ffffff35,inset 0 -3px 0 #00000012}.bg-cell[data-preview="valid"]{background:#23483d80;box-shadow:inset 0 0 0 2px #23483d}.bg-cell[data-preview="invalid"]{box-shadow:inset 0 0 0 2px #b3423e;background:#dcb6a7}.bg-cell[data-anchor]::after{content:'·';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:30px}.bg-cell:focus-visible{outline:3px solid #142f27;outline-offset:2px;z-index:1}
.hp-tray-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:22px 0 10px}.hp-tray-heading .hp-kicker{margin:0}.hp-tray-heading>span:last-child{font-size:11px}.bg-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bg-piece{border:1px solid #dce3d4;background:#fafbf4;border-radius:13px;padding:10px 5px;color:var(--hp-ink);min-width:0;cursor:pointer}.bg-piece[aria-pressed="true"]{border:2px solid var(--hp-ink);padding:9px 4px;background:#edf2e4}.bg-piece:disabled{opacity:.5;cursor:default}.bg-mini{display:grid;grid-template-columns:repeat(5,12px);grid-template-rows:repeat(5,12px);gap:2px;justify-content:center;margin:4px auto 5px}.bg-mini-cell{border-radius:2px}.bg-piece>span:last-child{display:block;font-size:10px;min-height:15px}.bg-used{height:74px;display:grid;place-items:center;font-size:24px}
.hp-status{font-size:13px;line-height:1.6;margin:18px 0;min-height:42px;border-left:2px solid var(--hp-accent);padding-left:12px}.hp-actions{display:flex;flex-wrap:wrap;gap:10px}.hp-button{background:var(--hp-ink);border:1px solid var(--hp-ink);color:#fffdf7;min-height:44px;padding:11px 17px;border-radius:9px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.5;cursor:pointer}.hp-button.hp-light{background:transparent;color:var(--hp-ink);border-color:var(--hp-wash)}.hp-button:disabled{opacity:.5;cursor:default}.hp-button:focus-visible,.bg-piece:focus-visible,.cp-bottle:focus-visible,.cp-top select:focus-visible{outline:3px solid var(--hp-ink);outline-offset:4px}.hp-small{font-size:11px;line-height:1.6;color:var(--hp-ink);opacity:.8;margin:14px 0 0}.hp-result,.hp-confirm{margin:18px 0;padding:20px;background:var(--hp-wash);border-radius:13px}.hp-result h2{font:500 27px Georgia,serif;margin:8px 0}.hp-result p,.hp-confirm p{font-size:13px;line-height:1.65}.hp-confirm>div{display:flex;gap:10px;flex-wrap:wrap}
.hp-margin{padding:10px 0}.hp-margin h2{font:500 31px/1.18 Georgia,serif;letter-spacing:-.02em;margin:10px 0 20px}.hp-margin p{font-size:13px;line-height:1.8}.hp-margin .hp-kicker{font-size:9px}.hp-margin-note{border-top:1px solid var(--hp-wash);padding-top:23px;margin-top:26px}.hp-other{display:block;margin-top:32px;padding:20px 0;border-top:1px solid var(--hp-wash);font-size:12px;line-height:1.8;text-decoration:none}.bg-stamp{border-radius:50%;border:1px solid #c4d5b3;width:176px;height:176px;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:rotate(-8deg);margin:0 auto 34px;background:#e7edd9}.bg-stamp span{font:500 49px Georgia,serif}.bg-stamp i{font-size:25px;font-style:normal}.bg-stamp small{font-size:8px;letter-spacing:.12em}.hp-reading{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;border-top:1px solid var(--hp-wash);margin:54px 0 28px;padding-top:34px}.hp-reading h2{font:500 27px Georgia,serif;margin:12px 0}.hp-reading p,.hp-source{font-size:12px;line-height:1.8}.hp-source{border-top:1px solid var(--hp-wash);padding-top:24px}.hp-source a{white-space:normal;margin-left:10px}kbd{font-size:11px;border:1px solid var(--hp-wash);padding:2px 5px;border-radius:3px}
.cp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}.cp-top label{flex:1;min-width:0}.cp-top select{max-width:100%;width:100%;border:0;border-bottom:1px solid #dccdbe;background:transparent;color:var(--hp-ink);font:500 20px Georgia,serif;min-height:42px;border-radius:0}.cp-move-stat{text-align:right}.cp-move-stat strong{font:500 32px Georgia,serif;display:block;font-variant-numeric:tabular-nums}.cp-shelf-wrap{background:radial-gradient(ellipse at 50% 0%,#fbf4dc,transparent 65%),linear-gradient(#fffaf4,#f2e8dd);border-radius:15px;padding:28px 14px 16px}.cp-shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px;align-items:end}.cp-bottle{border:0;background:transparent;color:var(--hp-ink);padding:0 0 4px;cursor:pointer;min-width:0;border-radius:8px;position:relative}.cp-glass{width:58px;max-width:95%;margin:0 auto;display:flex;flex-direction:column;border:2px solid #b7aa9c;border-top:0;border-radius:0 0 18px 18px;padding:0 3px 4px;box-shadow:4px 4px 0 #b7aa9c20;background:#ffffff40;position:relative;transition:transform .18s}.cp-glass::before{content:'';height:6px;border:2px solid #b7aa9c;border-radius:5px;margin:-3px -7px 9px;background:#fffaf4}.cp-unit{height:28px;display:grid;place-items:center;font-size:12px;font-weight:700;position:relative;border-bottom:1px solid #fff8;color:#352e25}.cp-unit[data-color="0"],.cp-chip[data-color="0"]{background:#adc29a}.cp-unit[data-color="1"],.cp-chip[data-color="1"]{background:#efb39d}.cp-unit[data-color="2"],.cp-chip[data-color="2"]{background:#c4b7e2}.cp-unit[data-color="3"],.cp-chip[data-color="3"]{background:#eacd81}.cp-unit[data-color="4"],.cp-chip[data-color="4"]{background:#a6c7d9}.cp-unit[data-color="5"],.cp-chip[data-color="5"]{background:#dca9bc}.cp-unit[data-color="empty"]{border:0;background:transparent}.cp-unit:last-child{border-radius:0 0 12px 12px;border:0}.cp-bottle[aria-pressed="true"] .cp-glass{transform:translateY(-10px);border-color:var(--hp-ink);box-shadow:0 0 0 3px #86604b22}.cp-bottle[data-hint="to"] .cp-glass{outline:3px dashed var(--hp-accent);outline-offset:4px}.cp-bottle[data-complete="true"]::after{content:'✓';position:absolute;top:0;right:0;background:#fff9;border-radius:50%;width:20px;height:20px;font-size:13px}.cp-bottle-label{display:block;font-size:10px;margin-top:12px;line-height:1.5}.cp-bottle-label b{font-weight:500;opacity:.8}.cp-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:18px;font-size:10px}.cp-chip{display:inline-flex;border-radius:4px;align-items:center;gap:5px;padding:3px 6px;color:#352e25}.cp-sketch{height:176px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;margin-bottom:34px}.cp-sketch i{width:38px;height:88px;border:2px solid #b9a895;border-top:0;border-radius:3px 3px 15px 15px;font:400 45px Georgia,serif;text-align:center;padding-top:20px;color:#9581af;background:linear-gradient(transparent 35%,#dfd5eb 35%)}.cp-sketch i:first-child{transform:rotate(-12deg);color:#8eaa75;background:linear-gradient(transparent 35%,#cbd9b8 35%)}.cp-sketch i:last-of-type{transform:rotate(12deg);color:#cd997d;background:linear-gradient(transparent 35%,#f0ceba 35%)}.cp-sketch span{flex-basis:100%;font-size:8px;letter-spacing:.14em;text-align:center}.cp-actions .hp-button{flex:1;white-space:nowrap;padding:11px 9px}
.bg-board-shell,.bg-tray{max-width:446px;margin-left:auto;margin-right:auto}
@media(min-width:851px){.bg-main .hp-room{grid-template-columns:minmax(0,570px) 265px;justify-content:space-between;gap:40px}}
.hp-main [hidden]{display:none!important}
@media(max-width:850px){.hp-room{grid-template-columns:minmax(0,1fr) 220px;gap:25px}.hp-player{padding:18px}.hp-margin h2{font-size:28px}.hp-heading>p{font-size:15px}.hp-reading{gap:25px}}
@media(max-width:650px){.hp-main{padding:24px 16px 44px}.hp-crumb span{display:none}.hp-heading{margin:32px 0 26px;align-items:center}.hp-heading>p{display:none}.hp-heading h1{font-size:clamp(40px,10vw,60px)}.hp-room{grid-template-columns:1fr;gap:32px}.hp-player{padding:16px}.bg-board-shell{padding:9px}.bg-board{gap:4px}.hp-margin{border-top:1px solid var(--hp-wash);padding:28px 4px 0}.bg-stamp,.cp-sketch{display:none}.hp-reading{grid-template-columns:1fr;margin-top:34px;gap:22px}.hp-reading h2{font-size:25px}.hp-margin h2{font-size:31px}.hp-stats strong{font-size:26px}.bg-mini{grid-template-columns:repeat(5,10px);grid-template-rows:repeat(5,10px)}.cp-shelf{gap:24px 8px}.cp-glass{width:49px}.cp-unit{height:25px}.cp-top select{font-size:18px}.hp-tray-heading>span:last-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cp-glass{transition:none}}

.hp-seo{margin-top:35px;border-top:1px solid var(--hp-wash);padding-top:30px}.hp-seo h2{font:500 30px Georgia,serif}.hp-seo h3{font:500 24px Georgia,serif;margin-top:25px}.hp-seo p{font-size:14px;line-height:1.9;max-width:930px}.hp-seo section{margin-bottom:35px}.hp-faq details{padding:17px 0;border-bottom:1px solid var(--hp-wash)}.hp-faq summary{font-size:14px;font-weight:650;cursor:pointer}.hp-seo nav{display:flex;flex-wrap:wrap;gap:25px;font-size:13px}