/* Shared selector for all three concepts and their design systems. */
.design-controls { position:fixed; z-index:80; top:auto; right:auto; left:max(16px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom)); width:300px; max-width:calc(100vw - 32px); padding:14px; background:rgba(255,252,247,.97); color:#29231e; border:1px solid #d5ccc1; box-shadow:0 12px 36px #0002; backdrop-filter:blur(16px); font:12px/1.4 "Poppins",sans-serif; }
.design-control-row { display:grid; grid-template-columns:55px minmax(0,1fr); gap:8px; align-items:center; margin-bottom:9px; }
.design-control-row > span { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.design-segments { display:flex; border:1px solid #d5ccc1; padding:2px; }
.design-segments button { display:flex; flex:1; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:32px; padding:5px 4px; border:0; border-radius:0; background:transparent; color:#29231e; font:700 10px/1.4 "Poppins",sans-serif; cursor:pointer; }
.design-segments button[aria-pressed="true"] { background:#29231e; color:#fff; }
.design-segments button:hover { box-shadow:inset 0 0 0 1px #827568; }
.design-segments i { display:block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.design-control-link { display:flex; justify-content:space-between; border-top:1px solid #d5ccc1; padding-top:9px; color:#29231e; font-size:10px; font-weight:700; text-decoration:none; }
.design-controls :focus-visible { outline:2px solid #29231e; outline-offset:2px; }
body { padding-bottom:160px; }
@media(max-width:640px) { .design-controls { left:max(8px, env(safe-area-inset-left)); bottom:max(8px, env(safe-area-inset-bottom)); max-width:calc(100vw - 16px); } }
body[data-type="handwritten"] { --serif:"Caveat",cursive; }
body[data-type="poppins"] { --serif:"Poppins",sans-serif; }