:root{--paper: #f6f1e8;--card: #fffdf9;--ink: #2f2a25;--ink-2: #6f665c;--ink-3: #a2988c;--line: #e6ddcf;--line-2: #d6c9b5;--madder: #b3282d;--r: 16px;--shadow: 0 1px 2px rgba(74,60,44,.05), 0 8px 22px -14px rgba(74,60,44,.35);--shadow-lift: 0 2px 4px rgba(74,60,44,.06), 0 14px 30px -16px rgba(74,60,44,.45)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:linear-gradient(180deg,#f9f5ee 0%,var(--paper) 34%,#f1e9dc 100%);color:var(--ink);font-family:var(--font-latin);font-size:14px;line-height:1.45;display:flex;flex-direction:column;overflow:hidden;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}header{padding:16px 28px 12px;display:flex;align-items:baseline;gap:12px}h1{font-family:var(--font-latin);font-weight:600;font-size:27px;letter-spacing:-.01em}h1 .tib{color:var(--ink-3);font-weight:400;font-size:21px;margin-left:5px}header .sub{font-size:13.5px;color:var(--ink-2)}#main{flex:1;position:relative;min-height:0}#stage{position:absolute;inset:0}#c{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.panel{position:absolute;top:12px;bottom:12px;background:#fffdf9e0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:18px;box-shadow:var(--shadow-lift);display:flex;flex-direction:column;overflow:hidden}.panel .scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;padding:16px;display:flex;flex-direction:column;gap:14px}.panel .scroll>*{flex:0 0 auto}.panel .scroll[hidden]{display:none}.cards{left:16px;width:232px}.combos{right:16px;width:288px}.rule{height:1px;background:var(--line);margin:2px 0}.eyebrow{font-family:var(--font-latin);font-size:15px;font-weight:500}.eyebrow .hint{font-family:inherit}.hint{font-family:var(--font-latin);font-size:12px;color:var(--ink-2)}.card{display:block;width:100%;padding:0;cursor:pointer;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .14s,transform .14s,box-shadow .14s}.card+.card{margin-top:-4px}.card:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--shadow)}.card.on{border-color:var(--madder);box-shadow:var(--shadow-lift)}.swatch{display:block;height:76px;position:relative;box-shadow:inset 0 0 0 1px #4a3c2c1a}.card .meta{display:grid;grid-template-columns:1fr auto;gap:1px 8px;padding:9px 13px 11px;position:relative;align-items:baseline}.cname{grid-column:1 / -1}.slotname{position:absolute;left:13px;top:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-cloth-dim, var(--ink-3))}.card.open .slotname:after{content:" · editing"}.chev{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border-radius:50%;background:#fffdf9e6;color:var(--ink-2);display:grid;place-items:center;font-size:11px;line-height:1;box-shadow:0 1px 4px #4a3c2c38;transition:transform .16s}.card.open .chev{transform:rotate(180deg)}.cname{font-family:var(--font-latin);font-weight:600;font-size:19px;line-height:1.15;letter-spacing:-.01em}.ctone{font-size:12.5px;color:var(--ink-2)}.hex{justify-self:end;white-space:nowrap;margin-top:3px;font-size:11px;letter-spacing:.04em;color:var(--ink-3)}.tabs{display:flex;gap:4px;padding:10px 12px 0;flex:0 0 auto;border-bottom:1px solid var(--line)}.tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:7px 6px 8px;cursor:pointer;color:var(--ink-3);font-family:var(--font-latin);font-size:14px;font-weight:500;margin-bottom:-1px;transition:color .13s,border-color .13s}.tab:hover{color:var(--ink-2)}.tab.on{color:var(--ink);border-bottom-color:var(--madder)}.tab[hidden]{display:none}.pgcheck{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 2px;margin-top:-2px;border:1.5px solid transparent;border-radius:12px;transition:background .13s,border-color .13s}.pgcheck:hover{background:var(--paper);border-color:var(--line)}.pgcheck input{appearance:none;-webkit-appearance:none;margin:0;width:19px;height:19px;flex:0 0 auto;cursor:pointer;border:1.5px solid var(--line-2);border-radius:6px;background:var(--card);display:grid;place-content:center;transition:background .12s,border-color .12s}.pgcheck input:after{content:"";width:10px;height:6px;margin-top:-2px;border-left:2px solid #fffdf9;border-bottom:2px solid #fffdf9;transform:rotate(-45deg) scale(0);transition:transform .13s ease-out}.pgcheck input:checked{background:var(--madder);border-color:var(--madder)}.pgcheck input:checked:after{transform:rotate(-45deg) scale(1)}.pgcheck:hover input{border-color:var(--madder)}.pgname{font-family:var(--font-latin);font-size:15px;font-weight:500}.combowrap.pgwrap{grid-template-columns:42px 1fr}.pgweave{display:block;width:42px;height:24px;border-radius:5px;box-shadow:inset 0 0 0 1px #4a3c2c24}.dyes{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px}.dye{display:flex;flex-direction:column;gap:5px;padding:6px;background:var(--card);border:1.5px solid var(--line);border-radius:11px;cursor:pointer;text-align:left;transition:border-color .13s,box-shadow .13s,transform .13s}.dye:hover{border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--shadow)}.dye.on{border-color:var(--madder);box-shadow:var(--shadow-lift)}.dye i{display:block;height:26px;border-radius:6px;box-shadow:inset 0 0 0 1px #4a3c2c24}.dye .dn{font-size:11.5px;font-weight:600;line-height:1.15}.dye .dhex{font-size:10px;letter-spacing:.03em;color:var(--ink-3);margin-top:1px}.dye.ghost{cursor:default;pointer-events:none;animation:pulse 1.1s ease-in-out infinite}.dye.ghost i{background:var(--line)}.dye.ghost .dn,.dye.ghost .dhex{background:var(--line);border-radius:4px;height:9px;margin-top:3px}.dye.ghost .dn{width:70%}.dye.ghost .dhex{width:60%;height:8px}.dye{touch-action:none}.dye.lifted{position:relative;z-index:40;cursor:grabbing;transition:box-shadow .16s ease;box-shadow:var(--shadow-lift),0 22px 40px -20px #4a3c2c99}.dye.lifted .dn,.dye.lifted .dhex{pointer-events:none}.pickerslot{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .26s cubic-bezier(.22,.61,.36,1),opacity .18s ease,margin .26s cubic-bezier(.22,.61,.36,1);margin-top:-14px}.pickerslot.open{grid-template-rows:1fr;opacity:1;margin-top:-4px}.pickerinner{overflow:hidden;min-height:0}.picker{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:14px}@media(prefers-reduced-motion:reduce){.pickerslot{transition:none}}#wheel{width:176px;height:176px;border-radius:50%;cursor:crosshair;display:block;touch-action:none;box-shadow:0 2px 10px #4a3c2c24}.lightrow{display:flex;align-items:center;gap:9px;width:100%;padding:0 4px}.lightrow .cap{font-size:11px;color:var(--ink-3)}#lightness{flex:1}.pickhint{font-size:12px;color:var(--ink-2)}input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:var(--line-2);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--card);border:1.5px solid var(--line-2);box-shadow:0 1px 4px #4a3c2c47;cursor:pointer}.harmony{display:flex;flex-direction:column;gap:2px}.harm{display:grid;grid-template-columns:34px 1fr;gap:0 10px;align-items:center;background:none;border:1px solid transparent;border-radius:11px;padding:5px 8px;cursor:pointer;text-align:left;transition:background .12s,border-color .12s}.harm:hover{background:var(--paper);border-color:var(--line)}.harm .hc{grid-row:1 / 3;height:34px;border-radius:9px;border:1px solid rgba(74,60,44,.12)}.harm .hn{font-size:14px;font-weight:600}.harm .hnote{font-size:11.5px;color:var(--ink-2);line-height:1.3}.harm{animation:harmIn .26s ease-out both}@keyframes harmIn{0%{opacity:0;transform:translateY(5px)}}.empty{border:1.5px dashed var(--line-2);border-radius:12px;padding:14px 13px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}.empty b{color:var(--ink);font-weight:700}.think{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-family:var(--font-latin);font-size:12.5px;font-weight:600}.spin{width:15px;height:15px;border-radius:50%;flex:0 0 auto;background:conic-gradient(#c0392b,#d68910,#b7950b,#1e8449,#1f6f8b,#5b3e90,#a93226,#c0392b);-webkit-mask:radial-gradient(circle,transparent 52%,#000 54%);mask:radial-gradient(circle,transparent 52%,#000 54%);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.harm.ghost{cursor:default;pointer-events:none;animation:pulse 1.1s ease-in-out infinite}.harm.ghost .hc{background:var(--line)}.harm.ghost .hn,.harm.ghost .hnote{background:var(--line);border-radius:4px;height:9px;margin:3px 0}.harm.ghost .hn{width:58%}.harm.ghost .hnote{width:82%;height:8px}@keyframes pulse{0%,to{opacity:.5}50%{opacity:.85}}@media(prefers-reduced-motion:reduce){.spin,.harm,.harm.ghost{animation:none}}.comborow{display:grid;grid-template-columns:24px 1fr 24px;gap:6px;align-items:center}.step{height:34px;border-radius:9px;cursor:pointer;background:var(--card);border:1.5px solid var(--line);color:var(--ink-2);font-size:15px;line-height:1;padding:0;transition:border-color .12s,background .12s,color .12s}.step:hover{border-color:var(--line-2);background:var(--paper);color:var(--ink)}.combowrap{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:7px;height:34px;padding:0 8px 0 4px;cursor:pointer;background:var(--card);border:1.5px solid var(--line);border-radius:10px;transition:border-color .14s,box-shadow .14s}.combowrap:hover{border-color:var(--line-2);box-shadow:var(--shadow)}.combowrap:focus-within{border-color:var(--madder)}.duo{display:block;position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(74,60,44,.12);box-shadow:0 1px 3px #4a3c2c1a}.duo.sm{height:24px}.duo i{position:absolute;inset:0;display:block}.duo.sm i.b{inset:auto 0 0;height:8px}#combo,#pgStyle{-webkit-appearance:none;appearance:none;width:100%;min-width:0;border:0;background:none;outline:none;font-family:var(--font-latin);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;padding:0 14px 0 0;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:right 4px center,right 0px center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}#combo optgroup{font-style:normal;font-weight:600;color:var(--ink-3)}#combo option{font-weight:500;color:var(--ink)}.combonote{margin-top:-8px;font-size:11.5px;line-height:1.35;color:var(--ink-2);min-height:2.7em}.combonote .g{display:block;color:var(--ink-3)}footer{border-top:1px solid var(--line);background:var(--card);padding:12px 28px 14px}.wardrobe{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.colophon{display:flex;flex-direction:column;gap:1px;min-width:0}.colophon .who{font-size:12px;color:var(--ink-2)}.colophon .src{font-size:11px;line-height:1.35;color:var(--ink-3);max-width:46ch}.grow{flex:1}.tbtn{background:var(--card);border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);font-size:13px;padding:9px 16px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}.tbtn:hover{color:var(--ink);border-color:var(--ink-3)}.tbtn.on{color:var(--card);background:var(--madder);border-color:var(--madder)}.tbtn.go{color:var(--madder);border-color:var(--madder)}.quiet{border-color:transparent;background:none;color:var(--ink-3)}#advanced{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}#advanced[hidden]{display:none}.slot{display:flex;flex-direction:column;gap:9px}.slot>.label{font-family:var(--font-latin);font-size:14px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.knobs{display:grid;grid-template-columns:repeat(3,auto);gap:5px 20px}.knob{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}.knob .n{width:92px;text-align:right}.knob .v{width:38px;color:var(--ink);font-variant-numeric:tabular-nums}.knob input[type=range]{width:92px}.mtabs,.combrail{display:none}@media(max-width:1080px){body{overflow:hidden}#main{position:static;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 8px 6px;gap:6px}#stage{position:relative;inset:auto;flex:1 1 auto;min-height:32vh;border-radius:var(--r);overflow:hidden}.mtabs{display:flex;gap:4px;flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}.mtab{flex:1;border:0;border-radius:999px;background:none;padding:6px 4px;cursor:pointer;color:var(--ink-2);font-family:var(--font-latin);font-size:13.5px;font-weight:500}.mtab.on{background:var(--madder);color:#fffdf9}.mtab[hidden],.mtabs.lone{display:none}.panel{position:static;inset:auto;width:auto;flex:0 0 auto;height:28vh;min-height:178px}.panel[hidden]{display:none}.panel .scroll{padding:13px;gap:12px}#main{position:relative}.panel.cards{position:absolute;left:20px;top:18px;z-index:12;width:84px;height:auto;min-height:0;max-height:calc(var(--stage-h, 40vh) - 36px);overflow:hidden;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.cards .scroll{display:flex;padding:0;gap:7px;overflow:visible}.cards .eyebrow{display:none}.cards .card{border-radius:11px;box-shadow:var(--shadow)}.cards .swatch{height:46px}.cards .card .meta{padding:4px 7px 6px;gap:0}.cards .card{position:relative}.cards .swatch{height:64px}.cards .card .meta{position:absolute;left:0;right:0;bottom:0;display:block;padding:0 8px 7px;background:none}.cards .slotname{left:9px;top:7px;font-size:8.5px;letter-spacing:.1em}.cards .cname{display:block;font-size:12.5px;line-height:1.15;color:var(--on-cloth, var(--ink))}.cards .ctone,.cards .hex,.cards .chev{display:none}.pgcheck{background:#fffdf9eb;border:1px solid var(--line);border-radius:11px;padding:7px 8px;gap:7px;box-shadow:var(--shadow);flex-wrap:wrap}.pgcheck .pgname{font-size:12px}.pgcheck .hint,.cards .pickerslot{display:none}.combrail{display:flex;flex-direction:column;gap:6px;position:absolute;right:20px;top:18px;z-index:12;width:40px;max-height:calc(var(--stage-h, 40vh) - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:2px}.combrail::-webkit-scrollbar{display:none}.cpair{flex:0 0 auto;display:block;width:36px;height:36px;padding:0;position:relative;overflow:hidden;cursor:pointer;border:1.5px solid rgba(255,253,249,.8);border-radius:9px;box-shadow:var(--shadow);background:none}.cpair i{position:absolute;inset:0;display:block}.cpair i.b{inset:auto 0 0;height:12px}.cpair.on{border-color:var(--madder);box-shadow:var(--shadow-lift)}.combos>.tabs{display:none}.cards .scroll{display:grid;grid-template-columns:1fr 1fr;align-items:start}footer{padding:3px 12px 5px}.colophon{gap:0}.colophon .who{font-size:9.5px;line-height:1.3}.colophon .src{font-size:9px;line-height:1.25}#advancedBtn,#advanced{display:none}.cards .eyebrow,.cards .pickerslot,.cards .harmony,.cards .pgcheck,.cards .pgcard{grid-column:1 / -1}.card+.card{margin-top:0}.cards{order:1}footer{position:sticky;bottom:0}}@media(max-height:560px)and (min-width:480px){header{padding:6px 14px 2px}h1{font-size:17px}#main{display:grid;grid-template-columns:1fr minmax(230px,34%);grid-template-rows:auto 1fr;gap:8px;padding:0 10px 6px}#stage{grid-column:1;grid-row:1 / 3;min-height:0}.mtabs{grid-column:2;grid-row:1}.mtabs.lone{display:none}.panel{grid-column:2;grid-row:2;height:auto;min-height:0;align-self:stretch}footer{display:none}.combrail{flex-direction:row;flex-wrap:wrap;width:74px}}@media(max-width:560px){header{flex-direction:column;gap:2px;padding:14px 20px 10px}#stage{height:46vh}.cards .scroll{grid-template-columns:1fr}header{flex-direction:column;gap:0;padding:6px 14px 3px}h1{font-size:19px}h1 .tib{font-size:16px}header .sub{display:none}.wardrobe{gap:8px}.grow{display:none}.cname{font-size:17px}.swatch{height:62px}#wheel{width:150px;height:150px}}