/* Values checked against the live Derevo storefront, not an unpublished theme. */
@font-face{font-family:'DM Sans';src:url('/fonts/dmsans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{--paper:#f2eee6;--ink:#12110f;--muted:#63615b;--line:#d3cec4;--accent:#284cde;--max:1440px;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper)}
body{font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
header,main{width:calc(100% - 96px);max-width:var(--max);margin-inline:auto}
header{height:108px;padding:0;border:0;background:var(--paper);gap:28px}
.brand-home{display:block;flex-shrink:0;text-decoration:none;color:var(--ink)}
.wordmark{display:block;position:relative;width:166px;aspect-ratio:1593/389;overflow:hidden;line-height:0}
.wordmark img{position:absolute;max-width:none;width:150.65913371%;height:auto;left:-25.2354049%;top:-58.09768638%;pointer-events:none}
.preview-nav{display:flex;gap:26px;align-items:center;margin-left:auto;font-size:.9375rem}
.preview-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding:7px 0}
.preview-nav a:hover{border-bottom-color:var(--ink)}
.preview-nav .shop-link{background:var(--ink);color:#fff;border:1px solid var(--ink);padding:10px 17px}
.badge{background:#fff9;color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:6px 10px;font-size:11px}
main{padding:35px 0 55px}
.eyebrow{font-size:.875rem;font-weight:550;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
h1,h2{font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-.055em;color:var(--ink)}
h1{font-size:clamp(2.5rem,4.5vw,4.5rem);line-height:1.1;margin-bottom:20px;max-width:19ch}
#surfaceTitle{font-family:Manrope,sans-serif;font-size:1.625rem;font-weight:500;letter-spacing:-.035em;line-height:1.2;margin:0}
p,.hint,small{color:var(--muted)}.intro{max-width:65ch;font-size:1rem}
.layout{grid-template-columns:minmax(0,1.8fr) minmax(310px,1fr);gap:clamp(24px,3vw,48px);margin-top:36px;align-items:start}
.preview,.controls{background:#fffefb;border:1px solid #e3dfd6;box-shadow:none;border-radius:3px;padding:26px}
.preview{border-radius:30px 0 30px 0}
button{font-family:'DM Sans',sans-serif;font-size:.9375rem;font-weight:500;border-radius:2px;border-color:var(--line);color:var(--ink);min-height:44px}
button:hover{background:#f6f3ec;border-color:#aaa59c}
button.active,.primary{background:var(--ink);border-color:var(--ink);color:#fff}
button:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #4671ff;outline-offset:4px}
textarea{font-family:'DM Sans',sans-serif;background:#fff;border-color:var(--line);border-radius:2px;color:var(--ink)}
.font-option[aria-selected=true]{background:#edf0ff;color:#223bad}.font-option small{font-family:'DM Sans',sans-serif}.font-group{color:var(--muted)}
#fontMenu{border-radius:3px;border-color:var(--line);box-shadow:0 12px 30px #12110f15}
#centerText{background:var(--accent);color:#fff;border-color:var(--accent)}#centerText:hover{background:#3b5eeb;border-color:#3b5eeb}
.check input{accent-color:var(--ink)}.check{color:var(--ink)}
.area-note{display:flex;align-items:flex-start;gap:9px;margin-top:10px;font-size:.875rem;line-height:1.5;color:#375d3d}
.area-swatch{flex:0 0 12px;height:12px;margin-top:5px;border-radius:2px;background:#78bb7e;border:1px solid #478b50}
#status{border-radius:3px;background:#eef6ed;color:#375d3d}#status.error{background:#fff2e6;color:#914d24}
.price{border-color:var(--line)}.price strong{color:var(--ink)}.next-step{background:#f6f3ec;border-radius:3px;color:var(--muted)}
#board .text-hit-area{stroke:var(--accent)}footer{color:var(--muted);border-top:1px solid var(--line);padding-top:22px;margin-top:32px;max-width:none}
::selection{background:#c7d2ff;color:var(--ink)}
@media(max-width:1100px){.preview-nav .cribbage-link{display:none}.preview-nav{gap:14px}header{gap:18px}}
@media(max-width:850px){header,main{width:calc(100% - 40px)}header{height:84px;gap:12px}.wordmark{width:132px}.badge{display:none}.preview-nav .shop-link{font-size:.875rem;padding:8px 12px}main{padding:24px 0 36px}.eyebrow{font-size:.75rem;margin-bottom:14px}h1{font-size:clamp(2.3rem,7vw,3.5rem);max-width:20ch}.layout{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:26px}.preview,.controls{padding:20px}.preview{border-radius:22px 0 22px 0}}