.tools-shell {
  --tools-cream: #fffaf0;
  --tools-green: #175c49;
  --tools-coral: #d67552;
  --tools-mustard: #e7ba56;
  --tools-ink: #213c33;
  --tools-muted: #68746b;
  width: min(1120px, 100%);
  margin-inline: auto;
  color: var(--tools-ink);
  font-family: inherit;
}
.tools-shell *, .tools-shell *::before, .tools-shell *::after { box-sizing: border-box; }
.tools-heading { max-width: 690px; margin-bottom: 28px; }
.tools-eyebrow { color: #a25438; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; line-height: 1.6; }
.tools-heading-title { margin: 9px 0 11px; font-size: clamp(1.8rem, 4.2vw, 2.8rem); font-weight: 800; line-height: 1.15; letter-spacing: -.04em; color: var(--tools-green); }
.tools-description { margin: 0; color: var(--tools-muted); font-size: 1rem; line-height: 1.75; }
.tools-tabs { display: flex; gap: 6px; width: fit-content; padding: 6px; background: #eceee2; border-radius: 20px 20px 0 0; }
.tools-tab { display: flex; gap: 9px; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 14px; background: transparent; color: #5b6d60; font: inherit; font-size: .94rem; font-weight: 750; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; }
.tools-tab[aria-selected="true"] { background: var(--tools-green); color: white; box-shadow: 0 3px 6px #175c4915; }
.tools-tab-icon { font-size: 1.3rem; line-height: 1; }
.tools-workspace { padding: clamp(24px, 4vw, 44px); border: 1px solid #dfe4d8; border-radius: 0 26px 26px 26px; background: var(--tools-cream); box-shadow: 0 15px 45px #175c4906; }
.tools-pane[hidden], .tools-inline-confirm[hidden] { display: none; }
.tools-intro { max-width: 720px; margin-bottom: 28px; }
.tools-title { margin: 5px 0 8px; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.25; letter-spacing: -.03em; color: var(--tools-green); }
.tools-wonder-layout, .tools-picker-layout { display: grid; grid-template-columns: minmax(230px, .85fr) minmax(0, 1.25fr); gap: 24px; align-items: stretch; }
.tools-form-card { display: flex; flex-direction: column; gap: 13px; padding: 24px; border: 1px solid #e2e4d8; border-radius: 19px; background: white; }
.tools-label { font-size: .95rem; font-weight: 750; line-height: 1.45; }
.tools-textarea { width: 100%; min-height: 120px; resize: vertical; padding: 13px 15px; border: 1px solid #cbd5c6; border-radius: 12px; background: #fffefa; color: var(--tools-ink); font: inherit; font-size: 1rem; line-height: 1.65; }
.tools-textarea::placeholder { color: #8b948a; }
.tools-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; border: 1px solid #d2d9cc; border-radius: 12px; padding: 11px 19px; background: white; color: var(--tools-green); font: inherit; font-size: .92rem; font-weight: 750; line-height: 1.35; cursor: pointer; text-align: center; transition: transform .18s, background .18s, box-shadow .18s; }
.tools-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px #175c4910; }
.tools-button-primary { background: var(--tools-green); border-color: var(--tools-green); color: white; }
.tools-button-primary:not(:disabled):hover { background: #104d3c; }
.tools-button-quiet { background: transparent; }
.tools-button-quiet:not(:disabled):hover { background: #edf1e7; }
.tools-button-large { min-height: 54px; padding-inline: 30px; font-size: 1.03rem; }
.tools-button:disabled, .tools-icon-button:disabled { opacity: .45; cursor: not-allowed; }
.tools-form-divider { margin-top: 3px; color: var(--tools-muted); font-size: .8rem; }
.tools-local-note { margin: 0; color: var(--tools-muted); font-size: .76rem; line-height: 1.55; }
.tools-storage-warning { color: #8e4b2e; }
.tools-hint { margin: 0; color: var(--tools-muted); font-size: .8rem; line-height: 1.6; }
.tools-status { margin: 0; color: var(--tools-green); font-size: .85rem; font-weight: 650; line-height: 1.6; }
.tools-status:empty { display: none; }
.tools-question-wall { display: flex; flex-direction: column; gap: 14px; max-height: 530px; overflow-y: auto; padding: 2px; }
.tools-question-card { display: grid; grid-template-columns: 28px minmax(0, 1fr) 32px; align-items: start; gap: 10px; margin: 0; padding: 21px 17px; border-radius: 14px; background: #f5e8c5; border: 1px solid #e9d9aa; }
.tools-question-card:nth-child(3n+2) { background: #e5eddf; border-color: #d7e1cf; }
.tools-question-card:nth-child(3n) { background: #fae6db; border-color: #f0d6c8; }
.tools-question-number { color: #8c7450; font-size: .78rem; font-weight: 800; padding-top: 3px; }
.tools-question-card p { margin: 0; font-size: 1.02rem; line-height: 1.6; font-weight: 650; overflow-wrap: anywhere; white-space: pre-wrap; }
.tools-icon-button { display: grid; place-items: center; width: 32px; height: 32px; margin-top: -5px; padding: 0; border: 0; border-radius: 50%; background: #ffffff75; color: #636e5c; font: inherit; font-size: 1.4rem; cursor: pointer; }
.tools-icon-button:hover { background: white; color: #994b33; }
.tools-empty { display: flex; flex: 1; flex-direction: column; min-height: 330px; justify-content: center; align-items: center; padding: 28px; border: 1.5px dashed #d5dccc; border-radius: 19px; text-align: center; background: #f6f5e9; }
.tools-empty-symbol { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 17px; border-radius: 25px 25px 25px 6px; background: var(--tools-mustard); color: var(--tools-green); font-size: 3rem; font-weight: 800; transform: rotate(-7deg); }
.tools-empty strong { color: var(--tools-green); font-size: 1.1rem; }
.tools-empty p { max-width: 245px; margin: 9px 0 0; color: var(--tools-muted); font-size: .9rem; line-height: 1.6; }
.tools-picker-layout { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.3fr); }
.tools-names-input { min-height: 230px; }
.tools-picker-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 380px; padding: 32px; border: 1px solid #dedfc9; border-radius: 20px; background: radial-gradient(ellipse at top, #fff2cd, #f5f1df 75%); text-align: center; }
.tools-picker-result { max-width: 100%; min-height: 90px; display: flex; justify-content: center; align-items: center; color: var(--tools-green); font-size: clamp(2rem, 5.5vw, 3.7rem); font-weight: 800; line-height: 1.15; letter-spacing: -.045em; overflow-wrap: anywhere; }
.tools-picker-count { margin: 0 0 7px; color: #66745e; font-size: .88rem; line-height: 1.6; }
.tools-picked-names { max-width: 430px; margin: 0; color: #697264; font-size: .78rem; line-height: 1.6; overflow-wrap: anywhere; }
.tools-picked-names:empty { display: none; }
.tools-result-enter { animation: tools-pop .35s ease-out; }
.tools-timer-card { max-width: 700px; margin-inline: auto; display: flex; align-items: center; flex-direction: column; gap: 20px; padding: 30px 24px; border-radius: 22px; border: 1px solid #dce3d5; background: #edf1e6; text-align: center; }
.tools-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.tools-preset { min-width: 94px; min-height: 42px; padding: 9px 17px; border: 1px solid #cdd7c4; border-radius: 999px; color: var(--tools-green); background: transparent; font: inherit; font-size: .9rem; font-weight: 750; cursor: pointer; }
.tools-preset[aria-pressed="true"] { background: white; border-color: var(--tools-green); box-shadow: inset 0 0 0 1px var(--tools-green); }
.tools-timer-readout { margin-top: 8px; color: var(--tools-green); font-size: clamp(4.8rem, 12vw, 8.6rem); line-height: 1; letter-spacing: -.06em; font-weight: 800; font-variant-numeric: tabular-nums; }
.tools-timer-caption { margin: 0; color: #64735c; font-size: 1rem; line-height: 1.6; }
.tools-timer-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.tools-timer-finished { background: #f8e6d8; border-color: #e3bda4; }
.tools-timer-finished .tools-timer-readout { color: #a75234; }
.tools-reflection-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-top: 8px; }
.tools-reflection-choice { display: flex; align-items: center; flex-direction: column; gap: 12px; min-height: 250px; padding: 25px 16px 19px; border: 2px solid #e3e2ce; border-radius: 20px; color: var(--tools-green); background: #f5f0dc; font: inherit; text-align: center; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.tools-reflection-ready { background: #eaf0e2; }
.tools-reflection-trying { background: #fcf0d3; }
.tools-reflection-help { background: #fae9dd; }
.tools-reflection-choice:hover { transform: translateY(-3px); }
.tools-reflection-choice[aria-pressed="true"] { border-color: var(--tools-green); box-shadow: 0 0 0 3px #175c4912; }
.tools-reflection-emoji { font-size: 3.2rem; line-height: 1.2; }
.tools-reflection-choice strong { font-size: 1.13rem; line-height: 1.35; }
.tools-reflection-description { color: #687263; font-size: .84rem; line-height: 1.6; }
.tools-reflection-count { margin-top: auto; padding: 6px 12px; border-radius: 999px; background: #ffffff80; font-size: .75rem; font-weight: 750; line-height: 1.6; }
.tools-reflection-choice[aria-pressed="true"] .tools-reflection-count { background: var(--tools-green); color: white; }
.tools-reflection-summary { margin: 22px 0 7px; color: var(--tools-green); font-size: .95rem; font-weight: 700; line-height: 1.6; }
.tools-pane > .tools-hint { max-width: 650px; margin: 7px 0 17px; }
.tools-pane > .tools-status { margin-top: 13px; }
.tools-inline-confirm { max-width: 490px; margin-top: 17px; padding: 18px; border: 1px solid #dfbba2; border-radius: 14px; background: #fff2e7; }
.tools-inline-confirm p { margin: 0 0 13px; line-height: 1.55; font-size: .92rem; font-weight: 650; }
.tools-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tools-shell :is(button, textarea):focus-visible { outline: 3px solid #d67552; outline-offset: 4px; }
@keyframes tools-pop { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 740px) {
  .tools-heading { margin-bottom: 22px; }
  .tools-tabs { width: 100%; border-radius: 18px 18px 0 0; gap: 3px; padding: 5px; }
  .tools-tab { flex: 1; min-width: 0; min-height: 60px; flex-direction: column; gap: 6px; padding: 10px 6px; border-radius: 12px; font-size: .75rem; }
  .tools-tab-icon { font-size: 1.2rem; }
  .tools-workspace { padding: 23px 16px; border-radius: 0 0 22px 22px; }
  .tools-wonder-layout, .tools-picker-layout { grid-template-columns: 1fr; gap: 17px; }
  .tools-form-card { padding: 18px; }
  .tools-question-wall { max-height: 500px; }
  .tools-question-card { padding: 18px 13px; grid-template-columns: 24px minmax(0, 1fr) 30px; gap: 7px; }
  .tools-empty { min-height: 245px; }
  .tools-picker-stage { min-height: 330px; padding: 26px 18px; }
  .tools-names-input { min-height: 150px; }
  .tools-reflection-choices { grid-template-columns: 1fr; gap: 12px; }
  .tools-reflection-choice { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; min-height: 138px; padding: 20px 17px; text-align: left; align-content: center; justify-items: start; }
  .tools-reflection-emoji { grid-row: 1 / 4; align-self: center; font-size: 2.6rem; }
  .tools-reflection-count { margin-top: 4px; }
  .tools-timer-card { padding: 25px 12px; gap: 18px; }
  .tools-preset { min-width: 80px; padding-inline: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tools-shell *, .tools-shell *::before, .tools-shell *::after { animation: none !important; transition: none !important; }
}