*{box-sizing:border-box} :root{--gold:#f4bf5c;--gold-light:#ffdc91;--ink:#181e24;--paper:#f5f1e9;--muted:#b9b9b5;--line:rgba(255,232,192,.13)}
body{margin:0;background:#27221e;color:var(--paper);font:15px/1.5 "Segoe UI",system-ui,sans-serif;min-height:100vh}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation;border:1px solid transparent;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease}button:disabled{opacity:.4;cursor:not-allowed}button:not(:disabled):active{transform:translateY(1px)}:focus-visible{outline:3px solid var(--gold-light);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.backdrop{position:fixed;inset:0;z-index:-2;background:url('/background.png') center/cover no-repeat}.backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,25,27,.9),rgba(22,25,27,.6) 55%,rgba(22,25,27,.4)),linear-gradient(0deg,rgba(18,22,26,.88),transparent 80%)}
.site-header{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:32px 40px}.brand{display:flex;gap:12px;align-items:center;font-size:15px;letter-spacing:1.8px;font-weight:750}.brand-mark{color:var(--gold);font-size:40px;line-height:1}.brand-light{font-weight:400}.brand small{display:block;color:#c4bdb2;letter-spacing:2.4px;font-size:8px;margin-top:3px}.preview-badge{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:1.6px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:#1b2126a8}.preview-badge i,.connection i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
main{max-width:1200px;margin:0 auto;padding:18px 40px 40px}.access-layout{min-height:calc(100vh - 220px);display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:center}.login-heading{margin:0;max-width:600px;text-align:center;font-size:clamp(25px,3.4vw,40px);font-weight:550;line-height:1.2;letter-spacing:-1px;text-wrap:balance}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--gold);font-weight:700;margin:0 0 17px}.intro h1{font-size:clamp(44px,5.4vw,74px);line-height:1.06;letter-spacing:-3.5px;font-weight:620;margin:0 0 25px}.intro h1 span{color:var(--gold)}.intro-copy{color:#dad0c2;font-size:16px;line-height:1.9}.intro-notes{display:flex;gap:30px;margin-top:44px;font-size:11px;color:#d3c9ba}.intro-notes b{display:block;color:var(--gold);font-weight:400;margin-bottom:5px;letter-spacing:2px}.panel{background:linear-gradient(145deg,#20272deb,#181e25f5);border:1px solid var(--line);box-shadow:0 18px 60px #0003;border-radius:22px;backdrop-filter:blur(18px)}.access-panel{max-width:430px;padding:38px;width:100%}.small-label{display:block;color:var(--gold);font-size:9px;font-weight:700;letter-spacing:2px}.access-panel h2{font-size:31px;font-weight:500;letter-spacing:-.9px;margin:12px 0 7px}.muted{color:var(--muted);font-size:13px;line-height:1.7}.access-panel form{margin-top:27px}label{font-size:12px;display:block;margin-bottom:9px;color:#e0ddd5}input{background:#10161ba8;border:1px solid #ffffff21;color:var(--paper);border-radius:10px;padding:14px 15px;width:100%;min-height:48px}.field-note{font-size:11px;color:#b8b4ab;line-height:1.6;margin:12px 0 20px}.primary,.secondary,.quiet{border-radius:10px;min-height:46px;padding:12px 20px;font-weight:600;font-size:13px}.primary{color:#34271a;background:linear-gradient(115deg,#f9d78b,#e9ad47);box-shadow:0 5px 18px #e9ad4712}.primary:not(:disabled):hover{border-color:#ffe0a466;box-shadow:0 6px 24px #e9ad4728}.primary span{float:right}.secondary{background:#ffffff07;color:var(--paper);border-color:#fff2}.secondary:hover,.quiet:hover{background:#ffffff10}.quiet{background:transparent;color:#ded8ca;border-color:var(--line)}.wide{width:100%}.text-button{background:none;color:var(--muted);width:100%;margin-top:16px;font-size:12px}.access-footer{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:10px;color:#b8b3a9;display:flex;gap:10px}.access-footer span{color:var(--gold)}.code-input{letter-spacing:12px;font-size:24px;text-align:center}
.workspace-heading{display:flex;justify-content:space-between;align-items:center;margin:10px 0 25px}.workspace-heading .eyebrow{margin-bottom:5px}.workspace-heading h1{font-size:32px;font-weight:500;letter-spacing:-1px;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:24px;align-items:start}.board-panel{padding:26px}.panel-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:20px}h2{font-size:17px;margin:0;font-weight:550}.status-chip{border-radius:99px;background:#ffffff07;border:1px solid var(--line);padding:5px 10px;color:#d0c5b3;font-size:10px}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:10px;border-radius:14px;background:#10161c;border:1px solid #ffffff0c;width:100%;aspect-ratio:1}.cell{background:#343c42;border-radius:5px;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-width:0}.cell.occupied{background:linear-gradient(135deg,#ddad70,#a47848);box-shadow:inset 0 1px 1px #ffe4ab70}.cell.pink{background:linear-gradient(135deg,#b34f91,#80365e)}.cell.green{background:linear-gradient(135deg,#559c77,#32664a)}.cell.yellow{background:linear-gradient(135deg,#f3c771,#ac7e2c)}.cell.gem:after{content:"";display:block;width:35%;height:35%;transform:rotate(45deg);border:1.5px solid #fffa;border-radius:2px}.board-caption{font-size:11px;text-align:center;color:#b4ada1;margin:13px 0 23px}.tray-heading{display:flex;justify-content:space-between;margin-bottom:12px}.tray-heading h3{font-size:12px;font-weight:500;margin:0}.tray-heading span{font-size:10px;color:var(--muted)}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.piece{background:#ffffff04;border:1px solid #ffffff0b;border-radius:10px;padding:8px;aspect-ratio:1.3;position:relative}.piece-grid{height:100%;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:2px}.piece-grid .cell{border-radius:2px}.piece-grid .cell.empty{background:transparent}.side-column{display:flex;flex-direction:column;gap:20px}.goals-panel,.controls-panel{padding:25px}.goals-panel .muted{font-size:10px}.goals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.goal{padding:14px 4px;text-align:center;border-radius:12px;background:#ffffff04;border:1px solid #ffffff09}.goal-gem{display:block;width:19px;height:19px;transform:rotate(45deg);margin:0 auto 13px;border:1px solid #ffffff70;border-radius:4px}.goal-gem.pink{background:#c163a1}.goal-gem.green{background:#73b68b}.goal-gem.yellow{background:#edc66e}.goal strong{font-size:17px;font-weight:600}.goal small{display:block;color:#c6c1b7;font-size:10px;margin-top:3px}.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:19px;margin-top:20px}.stats div{text-align:center}.stats div+div{border-left:1px solid var(--line)}.stats span{font-size:25px;font-weight:450}.stats small{display:block;font-size:8px;letter-spacing:1.5px;color:#aaa79f;margin-top:3px}.controls-panel .eyebrow{font-size:9px;margin-bottom:8px}.controls-panel h2{font-size:21px;letter-spacing:-.6px}.controls-panel button+button{margin-top:10px}.connection{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;gap:8px;font-size:10px;color:#b5b6af}.demo-note{font-size:10px;line-height:1.7;color:#d7cbbb;margin:0 12px}.message{padding:0 4px;color:#ffe0a4;font-size:12px;min-height:20px}.site-footer{max-width:1200px;padding:0 40px 25px;margin:auto;display:flex;justify-content:space-between;color:#c1b6a5;font-size:9px;letter-spacing:1.4px}dialog{border:1px solid #9e8153;border-radius:20px;background:#1b242c;color:var(--paper);padding:30px;max-width:410px;width:calc(100% - 36px)}dialog::backdrop{background:#080d12b5;backdrop-filter:blur(5px)}dialog h2{font-size:24px;margin-top:12px}.dialog-actions{display:flex;gap:12px;justify-content:end;margin-top:24px}
@media(min-width:1500px){.access-layout{min-height:700px}}@media(max-width:900px){.access-layout{gap:24px}.intro h1{font-size:48px;letter-spacing:-2px}.workspace{grid-template-columns:minmax(0,1.1fr) minmax(270px,.9fr);gap:16px}.board-panel,.goals-panel,.controls-panel{padding:19px}.panel-heading .muted{display:none}}
@media(max-width:680px){.site-header{padding:22px 20px}.brand{font-size:11px;letter-spacing:1px;gap:8px}.brand small{font-size:6px;letter-spacing:1.5px}.brand-mark{font-size:32px}.preview-badge{font-size:8px;letter-spacing:1px;padding:6px 8px}.backdrop{background-position:62% center}.backdrop:after{background:linear-gradient(180deg,#172029a8,#161c23ec)}main{padding:8px 18px 24px}.access-layout{gap:22px;min-height:auto;padding:22px 0}.intro{align-self:start}.intro .eyebrow{font-size:8px}.intro h1{font-size:43px;line-height:1.05;margin-bottom:18px}.intro h1 br{display:none}.intro-copy{font-size:13px;margin-bottom:0}.intro-copy br{display:none}.intro-notes{display:none}.access-panel{max-width:none;padding:26px}.access-panel h2{font-size:28px}.access-footer{margin-top:23px}.workspace-heading{align-items:center;margin:12px 0 22px}.workspace-heading h1{font-size:25px}.workspace-heading .eyebrow{font-size:8px;letter-spacing:2px}.workspace-heading .quiet{padding:8px 11px;font-size:11px;min-height:40px}.workspace{grid-template-columns:minmax(0,1fr);gap:18px}.board-panel{padding:18px}.side-column{gap:16px}.board{gap:3px;padding:8px}.cell{border-radius:4px}.board-caption{margin:11px 0 18px}.piece{aspect-ratio:1.5}.goals-panel,.controls-panel{padding:22px}.goals-panel .panel-heading .muted{display:block}.goals-panel{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:16px}.goals-panel .panel-heading{grid-column:1/-1;margin-bottom:0}.stats{display:flex;flex-direction:column;padding:0;margin:0;border:0;gap:9px;justify-content:center}.stats div+div{border-left:0;border-top:1px solid var(--line);padding-top:7px}.stats span{font-size:21px}.stats small{font-size:7px}.goal strong{font-size:15px}.goal{padding:13px 3px}.site-footer{padding:0 20px 22px;font-size:8px;letter-spacing:1px}.site-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

select { width:100%; padding:14px; margin:9px 0 16px; color:var(--text,#f5f3ed); background:#20262e; border:1px solid #49525e; border-radius:12px; font:inherit; }
.piece{padding:0;overflow:hidden}
.piece-preview{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);display:block}
.piece-block{stroke:#ffe4ab70;stroke-width:.035}
.piece-gem{fill:none;stroke:#ffffffdd;stroke-width:.035;stroke-linejoin:round}
.cell.blue{background:linear-gradient(135deg,#60addc,#366c9e)}
.goal-gem.blue{background:#60addc}
.queue-panel{margin-top:24px}.queue-position{display:block;font-size:48px;color:var(--gold);line-height:1.2;margin:14px 0}
.idle-warning{max-width:768px;margin:0 auto 18px;padding:14px 18px;border:1px solid #f4bf5c77;border-radius:12px;background:#493719;color:#ffe1a9}
.idle-warning p{font-size:12px;margin:6px 0 0}.idle-warning strong{font-size:14px}
@media(min-width:681px){
 .has-solver .site-header{max-width:1000px;padding:18px 28px}
 .has-solver main{max-width:1000px;padding:8px 28px 24px}
 .has-solver .workspace-heading{max-width:768px;margin:6px auto 18px}
 .has-solver .workspace-heading h1{font-size:27px}
 .has-solver .workspace{grid-template-columns:minmax(0,420px) minmax(260px,330px);justify-content:center;gap:18px}
 .has-solver .board-panel,.has-solver .goals-panel,.has-solver .controls-panel{padding:18px}
 .has-solver .board{max-width:370px;margin-inline:auto}
 .has-solver .panel-heading{margin-bottom:14px}
 .has-solver .board-caption{margin:10px 0 16px}
 .has-solver .tray-heading{margin-bottom:10px}
 .has-solver .side-column{gap:16px}
 .has-solver .goal{padding:11px 4px}
 .has-solver .stats{padding-top:14px;margin-top:16px}
 .has-solver .controls-panel h2{font-size:19px}
 .has-solver .controls-panel .field-note{margin:10px 0 14px}
 .has-solver .controls-panel button{min-height:42px;padding:10px 16px}
}