:root{--ink: #332c35;--soft-ink: #665963;--lavender: #ead7ee;--paper: #fffaf1;--paper-shadow: rgba(86, 64, 91, .22);--mint: #cdebd7;--butter: #fff0a9;--coral: #f6aaa3;--sky: #bfdff2;--grape: #cdb6e4;--leaf: #86b986;--focus: #2f78a7}*{box-sizing:border-box}html{background:var(--lavender);color:var(--ink);font-family:Comic Sans MS,Marker Felt,Segoe Print,system-ui,sans-serif}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.16) 1px,transparent 1px),var(--lavender);background-size:34px 34px}button{font:inherit}button:focus-visible{outline:4px solid var(--focus);outline-offset:3px}.page-shell{width:min(100%,940px);margin:0 auto;padding:30px 18px 48px}.hero{display:grid;gap:8px;margin:0 auto 22px;text-align:center}.hero h1{margin:0;font-size:2.1rem;line-height:1.05}.hero p{max-width:620px;margin:0 auto;color:var(--soft-ink);font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif;font-size:1rem;font-weight:750;line-height:1.45}.generator-shell{display:grid;gap:16px}.parts-board{display:grid;gap:12px}.part-row{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr);gap:10px;min-height:66px;align-items:center;padding:10px 12px;border:2px solid rgba(51,44,53,.16);border-radius:9px 13px 8px 15px;background:var(--paper);box-shadow:0 5px 12px var(--paper-shadow);transform:rotate(-.12deg)}.part-row:nth-child(2n){transform:rotate(.1deg)}.part-row:nth-child(3n){transform:rotate(-.06deg)}.part-row.has-result{border-color:#332c3547}.part-button{min-width:0;min-height:48px;border:0;border-radius:10px 16px 9px 14px;color:#211c23;cursor:pointer;font-size:1.28rem;font-weight:850;line-height:1.1;box-shadow:inset 0 -3px #332c3514;transition:transform .12s ease,filter .12s ease}.part-button:hover{filter:saturate(1.12);transform:translateY(-1px) rotate(-.4deg)}.part-button:active{transform:translateY(1px) rotate(.2deg)}.part-row:nth-child(1) .part-button,.part-row:nth-child(6) .part-button{background:var(--butter)}.part-row:nth-child(2) .part-button,.part-row:nth-child(7) .part-button{background:var(--mint)}.part-row:nth-child(3) .part-button,.part-row:nth-child(8) .part-button{background:var(--coral)}.part-row:nth-child(4) .part-button,.part-row:nth-child(9) .part-button{background:var(--sky)}.part-row:nth-child(5) .part-button,.part-row:nth-child(10) .part-button,.part-row:nth-child(11) .part-button{background:var(--grape)}.part-result{min-width:0;color:var(--ink);font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif;font-size:1.05rem;font-weight:850;overflow-wrap:anywhere;text-align:left}.part-result span{color:#66596394;font-weight:700}.part-result[data-filled=true]{color:var(--ink)}.bottom-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:5px}.action-button{min-height:50px;border:2px solid rgba(51,44,53,.28);border-radius:14px 10px 16px 12px;background:var(--paper);color:var(--ink);cursor:pointer;font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif;font-size:1rem;font-weight:850;box-shadow:0 5px #332c3529}.action-button.primary{background:var(--leaf);color:#102413}.action-button:hover{transform:translateY(-1px)}.action-button:active{box-shadow:0 2px #332c352e;transform:translateY(2px)}.status-line{min-height:24px;margin:0;color:var(--soft-ink);font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif;font-size:.95rem;font-weight:750;text-align:center}.creature-strip{display:block;width:min(100%,720px);height:auto;margin:4px auto 0;mix-blend-mode:normal}.notes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px;font-family:ui-rounded,Trebuchet MS,system-ui,sans-serif}.notes-grid article{padding:18px;border:2px solid rgba(51,44,53,.18);border-radius:10px;background:#fffaf1a8}.notes-grid h2{margin:0 0 8px;font-size:1.1rem}.notes-grid p{margin:0;color:var(--soft-ink);font-size:.98rem;font-weight:650;line-height:1.55}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}@media(max-width:680px){.page-shell{padding:22px 14px 36px}.hero h1{font-size:1.82rem}.part-row{grid-template-columns:minmax(92px,130px) minmax(0,1fr);min-height:62px;padding:9px}.part-button{min-height:46px;font-size:1.04rem}.part-result{font-size:.98rem}.notes-grid{grid-template-columns:1fr}}@media(max-width:420px){.part-row{grid-template-columns:1fr;gap:8px}.part-result{min-height:28px;text-align:center}.bottom-actions{grid-template-columns:1fr}}