/* Satin plastic keycaps and warm pegboard surfaces; drawing data stays flat. */
:root{--key-top:#56785e;--key-face:#39684f;--key-edge:#244a37;--cream-top:#fffdf5;--cream-face:#eee9db;--cream-edge:#c6beab}
.brand-symbol{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(59,54,32,.12))}
.brand{gap:10px;text-shadow:0 1px 0 #ffffff}
.app-header{background:linear-gradient(180deg,#fffef9,#f1eee4);box-shadow:inset 0 1px 0 #ffffff,0 2px 5px rgba(59,54,32,.04);border-bottom-color:#ded8c8}
.brand-page{background:linear-gradient(150deg,#faf8ef 0%,#f3f0e6 70%,#eeeadd 100%);background-attachment:fixed}
.primary-button,.secondary-button{position:relative;border-radius:9px!important;transition:background .16s,box-shadow .16s,transform .12s!important;text-decoration:none}
.primary-button{color:#fffef8!important;border:1px solid #31583f!important;background:linear-gradient(180deg,var(--key-top),var(--key-face))!important;text-shadow:0 1px 1px rgba(0,0,0,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 var(--key-edge),0 7px 10px rgba(41,69,46,.14)}
.primary-button:not(:disabled):hover{background:linear-gradient(180deg,#597a60,#3c7055)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 0 var(--key-edge),0 9px 14px rgba(41,69,46,.18)}
.primary-button:not(:disabled):active{transform:translateY(3px)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.12),0 1px 0 var(--key-edge),0 2px 3px rgba(41,69,46,.12)}
.secondary-button{border:1px solid #d4cdbb!important;color:#344c3e!important;background:linear-gradient(180deg,var(--cream-top),var(--cream-face))!important;text-shadow:0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff,0 3px 0 var(--cream-edge),0 5px 8px rgba(69,59,35,.09)}
.secondary-button:not(:disabled):hover{background:linear-gradient(180deg,#fffef9,#f3edde)!important}
.secondary-button:not(:disabled):active{transform:translateY(2px)!important;box-shadow:inset 0 1px 2px rgba(69,59,35,.1),0 1px 0 var(--cream-edge)}
.primary-button:disabled,.secondary-button:disabled{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 #bebbad;transform:none!important;opacity:.55}
.brand-page input:not([type=checkbox]),.brand-page textarea,.brand-page select{background:#fffef9;border-color:#d4cebf;box-shadow:inset 0 2px 3px rgba(77,65,34,.07),0 1px 0 rgba(255,255,255,.8)}
.auth-pane{background:linear-gradient(160deg,#fffef9,#f7f4e9);border-color:#e4ddcb;box-shadow:inset 0 1px 0 #ffffff,0 3px 0 #e2dccb,0 12px 24px rgba(74,64,39,.06)}
.product-example{background:#f8f5e9;border:5px solid #ede7d5;outline:1px solid #dcd4bf;border-radius:16px;box-shadow:inset 0 1px 0 #fffdf4,0 3px 0 #d8d0bb,0 10px 20px rgba(74,64,39,.07)}
.example-pair img{background:linear-gradient(135deg,#fffef8,#f3f0e4);border:1px solid #e7e0ce;box-shadow:inset 0 1px 0 #ffffff}
#example-result[data-render=simulation]{image-rendering:auto;background:#f5f1e5}
.example-switch{background:#e5dfcc;box-shadow:inset 0 1px 3px rgba(74,64,39,.12);gap:3px}
.example-switch button{min-height:44px;box-shadow:none;transition:background .15s,box-shadow .15s}
.example-switch button:not([aria-pressed=true]){color:#52604f}
.example-switch button[aria-pressed=true]{background:linear-gradient(180deg,#fffef8,#eee8d6);box-shadow:inset 0 1px 0 white,0 2px 2px rgba(74,64,39,.16);color:#294c36}
.sample-picker{display:flex;gap:10px;padding:0 20px 16px;flex-wrap:wrap}
.sample-picker button{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 8px;min-height:44px;border:1px solid #ddd5c2;border-radius:8px;background:linear-gradient(180deg,#fffdf5,#eee8d8);box-shadow:inset 0 1px 0 white,0 2px 0 #d2c8b1;color:#586650;font-size:12px}
.sample-picker button img{width:28px;height:32px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(74,64,39,.12))}
.sample-picker button[aria-pressed=true]{color:#294d37;border-color:#8ea78b;background:linear-gradient(180deg,#e7f0df,#d1dfc8);box-shadow:inset 0 1px 0 #f7fff1,0 2px 0 #99ad8e;font-weight:650}
.sample-picker button:active{transform:translateY(1px)!important;box-shadow:inset 0 1px 2px rgba(46,65,39,.1)}
.example-description{font-size:14px;color:#61705c;padding:0 20px;margin:0 0 14px}
.example-budget{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:0 20px 14px;font-size:12px;color:#52604e}
.example-budget select{width:auto;max-width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--cream-edge);border-radius:8px;font-size:12px}
.example-budget small{flex-basis:100%;color:var(--muted);font-size:12px}
.example-footer{flex-wrap:wrap}
.example-own{padding:0 20px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.example-own p{font-size:12px;color:var(--muted);margin:0;max-width:230px}
.example-own button{white-space:nowrap;min-height:44px;padding:10px 16px;font-size:12px}
.example-credit{margin:12px 0 0}
.auth-pane .account-tabs button[aria-pressed=true]{border-bottom-color:#4b7154;text-shadow:0 1px 0 white}
.entitlement-summary{background:linear-gradient(160deg,#fffdf4,#f2eddd)!important;box-shadow:inset 0 1px 0 white,0 3px 0 #dfd6c0}
.work-modes{background:#e8e5d8;box-shadow:inset 0 1px 3px rgba(74,64,39,.1)}
.work-modes button[aria-pressed=true]{background:linear-gradient(180deg,#fffef7,#f1ecdd);color:#294c36;box-shadow:inset 0 1px 0 white,0 2px 2px rgba(74,64,39,.12);text-shadow:0 1px 0 white}
body[data-mode=edit] .icon-button{background:linear-gradient(180deg,#fffdf5,#efeadc);border-color:#d8d1c0;box-shadow:inset 0 1px 0 white,0 2px 0 #d4cbb6}
body[data-mode=edit] .icon-button[aria-pressed=true]{background:#dbe7d3;box-shadow:inset 0 2px 3px rgba(54,77,40,.12);color:#2e604b}
body[data-mode=edit] .icon-button:active{transform:translateY(1px)}
.brand-page ::selection{background:#dbe7cf;color:#243b32}
.brand-page input::placeholder{color:#6b7066;opacity:1}
.hero-inspiration{display:none}
#inspiration-examples .sample-picker button {white-space:nowrap}
@media(max-width:700px){#inspiration-examples .sample-picker{gap:6px}#inspiration-examples .sample-picker button{flex:1 1 0;min-width:0;justify-content:center;padding:6px 4px;gap:4px;font-size:12px}#inspiration-examples .sample-picker button img{width:22px;height:28px}.example-budget{display:grid;gap:8px}.example-budget select{width:100%;font-size:16px}}
@media(max-width:360px){#inspiration-examples .sample-picker button{flex-direction:column;padding-block:8px}}
#inspiration-examples{scroll-margin-top:20px}
@media(max-width:700px){.brand-symbol{width:38px;height:38px}.brand-page .brand{gap:7px}.product-example{border-width:4px}.example-heading{padding:16px}.sample-picker{padding-inline:16px}.example-pair{padding-inline:16px;gap:10px}.example-description{padding-inline:16px}.example-footer{padding-inline:16px}.example-credit{padding-inline:16px}.example-own{padding-inline:16px;align-items:flex-start;flex-direction:column}.example-own button{width:100%;justify-content:center}.example-own p{max-width:none}.example-switch button{padding-inline:9px;min-height:44px;font-size:12px}.brand-nav{gap:14px}.hero-inspiration{display:flex;align-items:center;gap:8px;text-decoration:none;margin:10px 0 12px;color:var(--green)}.hero-inspiration img{width:42px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 1px rgba(74,64,39,.12))}.hero-inspiration span{font-size:12px;color:var(--muted);margin-left:4px}.hero-inspiration strong{font-size:12px;color:var(--green);font-weight:650}}
@media(prefers-reduced-motion:reduce){.primary-button,.secondary-button,.sample-picker button{transition:none!important}}