:root{font:16px/1.6 system-ui,sans-serif;color:#422b23;background:#fff5e8}*{box-sizing:border-box}body{margin:0}main{max-width:640px;margin:auto;padding:24px 18px 60px}header{padding:16px 0}h1{font-size:1.8rem;line-height:1.25}h2{font-size:1.1rem;margin:0 0 14px}p{margin:12px 0}.badge{color:#864019;background:#ffe6bd;border-radius:20px;padding:6px 12px;font-size:.85rem}section,details{background:white;border:1px solid #ebd8c4;border-radius:18px;padding:20px;margin:18px 0}.picker{display:block;border:2px dashed #bf956e;border-radius:12px;padding:20px;text-align:center;cursor:pointer}input{max-width:100%;margin:10px 0}button{font:inherit;background:#a34420;color:white;border:0;border-radius:10px;padding:13px 18px;min-height:48px;width:100%;cursor:pointer}button:disabled{opacity:.5;cursor:wait}button.history{background:#fff1df;color:#76351c;text-align:left;margin:5px 0}img{max-width:100%;max-height:300px;object-fit:contain;display:block;margin:16px auto}img[hidden],[hidden]{display:none!important}.hint,small{color:#755b48;font-size:.85rem;overflow-wrap:anywhere}progress{width:100%;height:20px;accent-color:#a34420}#error,#message{color:#993b22}a{color:#a34420;overflow-wrap:anywhere}.entry img{width:150px;height:150px}summary{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d78c24;outline-offset:3px}

.profile{display:flex;align-items:center;gap:16px}.profile img{margin:0;image-rendering:pixelated;border-radius:10px}.profile .quiet{background:transparent;color:#a34420;padding:2px;min-height:32px;font-size:.85rem}dialog{border:1px solid #ebd8c4;border-radius:18px;width:min(92vw,400px);padding:24px;color:#422b23}dialog::backdrop{background:#44251777}dialog input{display:block;width:100%;padding:12px;border:1px solid #bf956e;border-radius:8px;font:inherit}.danger{margin-top:12px;background:#9a4229}#confirm{margin-bottom:12px}#nickname-error{color:#993b22}

.design-section{padding:16px 12px}.design-section>#submit{margin-top:18px}#edit-design{background:#fff0db;color:#a34420;margin-bottom:10px}.design-section .de-root .de-image{margin:0;max-height:none}#preview{image-rendering:auto}
#voice-design textarea,#voice-design select{width:100%;font:inherit;border:1px solid #bf956e;border-radius:9px;padding:10px;margin:8px 0 14px;background:#fff;color:#422b23}#voice-design blockquote{margin:12px 0;padding-left:12px;border-left:3px solid #bf956e}#voice-design [data-status]{padding:10px;background:#fff1df;border-radius:8px;overflow-wrap:anywhere}.ai-actions{display:flex;gap:8px}.ai-actions .quiet{background:#fff0db;color:#a34420}.ai-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.ai-frame{padding:8px;background:#fff5e8;color:#76351c;font-size:12px}.ai-frame img{width:100%;height:75px;margin:0 0 6px}.ai-frame span{display:block}
.ai-frame[aria-pressed="true"]{outline:3px solid #a34420;outline-offset:2px}
.studio-eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;color:#9b3d32}.template-studio{padding:20px 14px}.template-heading{display:flex;gap:12px;align-items:flex-start}.template-heading h2{margin:0}.template-heading p{margin:4px 0 18px}.step-number{display:grid;place-items:center;width:30px;height:30px;flex:none;background:#a8392e;color:white;border-radius:50%;font-weight:700}.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.template-card{background:#fff9f3;color:#4a342d;border:1px solid #e9dbcd;padding:10px;text-align:left;min-width:0}.template-card img{width:100%;height:145px;margin:0 0 10px}.template-card strong,.template-card span{display:block}.template-card strong{font-size:14px}.template-card span{font-size:11px;color:#846e61;margin-top:4px}.template-card[aria-pressed=true]{border:2px solid #a8392e;background:#fff1e7;padding:9px}.workshop-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #eee0d8;padding-top:22px;margin-top:22px}.workshop-heading h2{margin:5px 0 14px}.workshop-heading button{width:auto;background:transparent;color:#8a3d32;white-space:nowrap;font-size:13px;padding:7px 10px}.design-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;background:#f0eae3;border-radius:13px;gap:5px;margin-bottom:18px}.design-tabs button{background:transparent;color:#79685c;padding:10px}.design-tabs button[aria-selected=true]{background:white;color:#9b3329;box-shadow:0 2px 7px #51352b12;font-weight:700}.voice-preview{border-radius:14px;background:#fcf7ef;border:1px solid #eee0d0;padding:12px;margin-bottom:18px}.voice-preview img{height:auto;width:100%;max-height:420px;margin:0 auto}.voice-preview p{margin-bottom:0;text-align:center}.voice-intro h3{font-size:19px;margin:8px 0}.voice-intro p{font-size:14px;color:#76675b}.voice-examples{display:flex;gap:8px;margin-bottom:14px}.voice-examples button{background:#f3ede6;color:#755845;padding:8px;font-size:12px;min-height:38px}.record-button{background:#a8392e!important;transition:background .2s}.record-button.is-recording{background:#7e2420!important;box-shadow:0 0 0 5px #a8392e18}.voice-wait{display:flex;gap:16px;align-items:center;background:#fcf1df;border:1px solid #e9cfaa;border-radius:14px;padding:16px;margin:12px 0 18px}.voice-wait strong{font-size:15px;color:#74442b}.voice-wait p{font-size:12px;color:#8b6a51;margin:4px 0}.voice-wait span{font:12px ui-monospace,monospace;color:#8a5a3b}.thinking{display:flex;gap:5px;flex:none}.thinking i{width:8px;height:8px;border-radius:50%;background:#a8392e;animation:thinking 1.2s ease-in-out infinite}.thinking i:nth-child(2){animation-delay:.16s}.thinking i:nth-child(3){animation-delay:.32s}.voice-turn{padding:12px 14px;background:#f8f4ee;border-left:3px solid #c79c78;border-radius:8px;margin:12px 0;font-size:13px}.voice-turn p{margin:5px 0}.voice-turn strong{color:#926449;font-size:12px}.voice-footer{display:flex;gap:10px;align-items:center;margin-top:16px}.voice-footer button{width:auto;background:transparent;color:#866b57;font-size:12px;padding:6px 10px;flex:none}.studio-submit{border-top:1px solid #eee0d8;margin-top:22px;padding-top:12px}.studio-submit p{font-size:12px;color:#76675b}.studio-submit button{background:#a8392e}.template-studio .de-root .de-image{margin:0;max-height:none}.template-studio #manual-panel{padding:0}.template-studio #manual-panel>.hint{padding:0 4px}.template-studio .de-root{font-size:14px}#voice-design textarea{background:#fffdfa;border-color:#dac9ba}#voice-design [data-status]{background:#f6f0e8;color:#7b5541;font-size:14px}@keyframes thinking{0%,75%,100%{transform:translateY(0);opacity:.35}35%{transform:translateY(-6px);opacity:1}}@media(min-width:600px){.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.template-card img{height:125px}}@media(prefers-reduced-motion:reduce){.thinking i{animation:none;opacity:.8}*{scroll-behavior:auto!important}}
.template-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}

.template-heading h2 {
  white-space: nowrap;
  font-size: clamp(16px, 5vw, 22px);
}

.task-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-history-heading h2 {
  margin: 0;
}

.task-history-heading [data-template-end] {
  width: auto;
  flex-shrink: 0;
}

.template-mode {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.template-mode button {
  width: auto;
  padding: 6px 14px;
}

.template-mode button[aria-pressed="true"] {
  background: #fff1e7;
  color: #9b3329;
  font-weight: 700;
}

.template-card-custom {
  display: grid;
  place-items: center;
  min-height: 92px;
  border-style: dashed;
  background: #fff0db;
  color: #873817;
}

#mobile-learning .design-entry-button {
  background: #a34420;
}