:root { color-scheme: light; --ink:#202c32; --paper:#f5f2eb; --blue:#244f6c; --line:#d7dbd7; --soft:#eaf0f0; --focus:#d6e8ef; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select,textarea { font:inherit; }
button,summary { cursor:pointer; }
a { color:inherit; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #b67134; outline-offset:3px; }
.app-shell { max-width:1380px; padding:0 52px; margin:0 auto; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.brand { font-size:27px; font-weight:700; letter-spacing:-1px; text-decoration:none; display:flex; align-items:center; min-height:44px; gap:15px; }
.brand span { font-family:Georgia,serif; font-size:19px; font-weight:400; font-style:italic; letter-spacing:0; }
.prototype-label { font-size:12px; color:#59676a; }
.intro { padding:32px 0; max-width:1120px; margin:auto; }
.home-start { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr); gap:48px; align-items:center; }
.intro h1 { font-size:clamp(36px,4vw,54px); max-width:650px; }
.format-copy { font-size:15px; color:#526165; line-height:1.55; margin:10px 0 0; }
.price-copy { font-size:14px; color:#344a40; font-weight:600; line-height:1.6; margin:16px 0 20px; }
.price-copy span { display:block; font-weight:400; }
.penny-start { padding:20px; border:1px solid #ced8c5; border-radius:18px; background:#f9faf3; }
.penny-welcome { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.penny-welcome .penny-avatar { flex:0 0 56px; width:56px; height:65px; }
.penny-welcome p { font-size:14px; line-height:1.5; color:#5a6c59; margin:6px 0 0; }
.penny-welcome h2 { font:400 26px/1.2 Georgia,serif; margin:0; }
.occasion-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.occasion-choices .button { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px; padding:14px; min-height:49px; }
.start-note { font-size:13px; color:#667367; margin:12px 0 0; line-height:1.5; }
.home-example { max-width:1120px; margin:auto; padding:28px 0 40px; border-top:1px solid var(--line); }
.home-example h2 { font:400 34px/1.2 Georgia,serif; margin:0 0 10px; }
.sample-note { color:#65726a; font-size:13px; line-height:1.5; margin:0 0 24px; }
.home-section { max-width:1120px; margin:auto; padding:36px 0; border-top:1px solid var(--line); }
.home-section h2 { font:400 clamp(28px,3vw,34px)/1.25 Georgia,serif; max-width:760px; margin:0 0 22px; }
.home-section h3 { font-size:18px; line-height:1.4; margin:0 0 12px; }
.home-section p { font-size:16px; line-height:1.65; max-width:760px; color:#526165; margin:0 0 18px; }
.home-formats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px; }
.home-formats h3 span { color:#526b58; margin-right:8px; }
.home-section .home-note { font-size:14px; margin:18px 0 0; }
.home-steps { list-style:none; counter-reset:steps; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:0; margin:26px 0 0; }
.home-steps li { counter-increment:steps; position:relative; padding-left:44px; }
.home-steps li::before { content:counter(steps); position:absolute; left:0; top:0; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#e5ebdf; color:#405843; }
.home-steps p { font-size:14px; }
.home-offer .button { margin-top:4px; min-height:48px; white-space:normal; }
.home-faq details { border-top:1px solid var(--line); }
.home-faq summary { padding:18px 0; font-size:16px; font-weight:600; line-height:1.5; }
.home-faq details p { font-size:15px; }
.home-info { max-width:640px; width:calc(100% - 32px); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid var(--line); border-radius:14px; padding:24px; background:var(--paper); color:var(--ink); }
.home-info::backdrop { background:#172b3899; }
.home-info header { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:20px; }
.home-info h2 { font:400 26px/1.3 Georgia,serif; margin:0; min-width:0; }
.home-info p { font-size:15px; line-height:1.65; }
.home-info .button { flex-shrink:0; min-height:44px; }
.workspace-extra { display:flex; justify-content:flex-end; margin:0 0 16px; }
.workspace-extra .button { min-height:44px; }
.home-example-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; }
.sample-card { max-width:400px; width:100%; margin:0; justify-self:center; text-align:center; }
.sample-sheet { position:relative; background:#fff; border:1px solid #e0ddcf; box-shadow:0 12px 32px #273c3c12; border-radius:3px; overflow:hidden; }
.sample-sheet img { display:block; width:100%; height:auto; }
.sample-card figcaption { margin:14px 0 0; }
.sample-card .button,.example-story .button { min-height:44px; }
.example-story { max-width:480px; }
.example-story > p { font-size:16px; line-height:1.6; margin:0 0 18px; }
.example-story .example-story-label { font-size:13px; font-weight:600; color:#526b58; margin:0 0 8px; }
.example-story blockquote { margin:0 0 16px; border-left:3px solid #a7b79f; padding-left:18px; }
.example-story blockquote p { font:400 24px/1.45 Georgia,serif; margin:0; }
.example-story .example-answer { font-size:14px; }
.example-background { margin:16px 0 8px; border-top:1px solid var(--line); }
.example-background summary,.demo-background summary,.example-sheet-text summary { font-size:14px; font-weight:600; line-height:1.5; padding:12px 0; }
.example-background p,.demo-background p { font-size:14px; line-height:1.6; margin:0 0 12px; }
.demo-background { padding:0 28px; border-bottom:1px solid var(--line); }
.example-sheet-view { width:calc(100% - 32px); max-width:940px; max-height:calc(100dvh - 32px); padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--paper); overflow:auto; }
.example-sheet-view::backdrop { background:#172b3899; }
.example-sheet-view > header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.example-sheet-view h2 { font:400 26px/1.2 Georgia,serif; margin:0; }
.example-sheet-view .button { min-height:44px; }
.example-sheet-preview { max-height:calc(100dvh - 210px); overflow:auto; overscroll-behavior:contain; border:1px solid var(--line); background:#eae7df; }
.example-sheet-preview img { display:block; width:min(100%,calc((100dvh - 210px)*.70707)); height:auto; margin:auto; background:white; }
.example-sheet-preview.is-zoomed img { width:840px; max-width:none; margin:0; }
.example-sheet-preview:focus-visible { outline:3px solid #b67134; outline-offset:2px; }
.example-sheet-text ul { padding-left:20px; }
.example-sheet-text li,.example-sheet-text p { font-size:14px; line-height:1.6; margin-bottom:10px; }
.example-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; }
.example-controls > div { width:min(100%,420px); }
.word-list { display:grid; gap:15px; margin:16px 0; }
.word-list-row { display:grid; grid-template-columns:minmax(90px,.5fr) minmax(0,1.5fr) auto; gap:12px; align-items:end; }
.word-list-row label { margin:0; min-width:0; }
.word-list-row input { margin-top:8px; font-size:14px; }
.word-list-row input[readonly] { background:#eff3eb; }
.footer > div { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.footer .button,.footer a { font-size:14px; min-height:44px; display:inline-flex; align-items:center; padding:8px 4px; }
@media (max-width:1000px) { .home-start { gap:30px; } .home-example-content { gap:32px; } }
@media (max-width:760px) {
  .home-section { padding:28px 0; }
  .home-formats,.home-steps { grid-template-columns:1fr; gap:16px; }
  .home-info { padding:18px; }
  .intro { padding:24px 0; }
  .home-start { grid-template-columns:1fr; gap:0; }
  .home-example { padding:24px 0 32px; }
  .home-example h2 { font-size:30px; }
  .home-example-content { grid-template-columns:1fr; gap:28px; }
  .sample-card { max-width:340px; }
  .sample-sheet { max-height:260px; }
  .sample-sheet::after { content:''; position:absolute; left:0; right:0; bottom:0; height:32px; background:linear-gradient(transparent,#ffffff); pointer-events:none; }
  .example-story { max-width:none; }
  .example-sheet-view { padding:14px; }
  .example-sheet-view > header { align-items:start; gap:12px; }
  .example-sheet-view h2 { font-size:23px; }
  .demo-background { padding:0 18px; }
  .penny-start { padding:18px; }
  .penny-welcome h2 { font-size:24px; }
  .occasion-choices .button { padding:12px; font-size:14px; }
  .word-list-row { grid-template-columns:minmax(0,1fr) auto; }
  .word-list-row label:nth-child(2) { grid-column:1 / -1; grid-row:2; }
  .word-list-row button { grid-column:2; grid-row:1; }
  .example-controls { flex-wrap:wrap; }
}
.eyebrow { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; margin:0 0 12px; color:var(--blue); }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:Georgia,serif; font-weight:400; font-size:clamp(38px,4.5vw,60px); line-height:1.06; letter-spacing:-1.7px; margin-bottom:18px; }
.intro-copy { font-size:16px; line-height:1.55; max-width:510px; margin-bottom:0; color:#526165; }
.demo-picker { padding:24px 0 0; max-width:360px; justify-self:end; width:100%; }
label { display:block; font-size:13px; font-weight:600; margin-bottom:9px; }
select,input,textarea { width:100%; border:1px solid #c1cbc9; border-radius:7px; background:#fff; color:var(--ink); padding:12px; }
select { font-size:15px; }
.demo-picker p { font-size:12px; line-height:1.6; color:#607074; margin:12px 0 0; }
.puzzle-card { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 8px 28px #263d4410; }
.puzzle-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px 32px; border-bottom:1px solid var(--line); }
.puzzle-header h2 { font-family:Georgia,serif; font-size:30px; font-weight:400; margin:0 0 8px; }
.puzzle-header > div:first-child { min-width:0; }
.puzzle-header h2,#puzzle-subtitle { overflow-wrap:anywhere; }
.puzzle-header p:last-child { font-size:13px; color:#687477; margin-bottom:0; }
.print-actions { display:flex; flex-wrap:wrap; gap:8px; }
.print-settings { width:330px; flex-shrink:0; }
.print-settings select { margin-top:7px; font-size:12px; padding:9px; }
.puzzle-header .print-settings p { font-size:11px; line-height:1.5; margin-top:9px; }
.grading-legend { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:11px; line-height:1.6; margin:8px 0 0; }
.grading-legend span:first-child { color:#9a2927; }
.grading-legend span:nth-child(2) { color:#226c3a; }
.square.wrong { box-shadow:inset 0 0 0 2px #b44b44; }
.square.correct { box-shadow:inset 0 0 0 1px #5e9b6d; }
.feedback-mark { position:absolute; bottom:1px; left:2px; font-size:9px; line-height:1; pointer-events:none; font-weight:700; z-index:2; }
.wrong .feedback-mark { color:#9a2927; }
.correct .feedback-mark { color:#226c3a; }
.personal-info,.own-question { padding:18px; margin:10px 0 22px; border:1px solid var(--line); border-radius:8px; background:#f8faf7; }
.personal-info h3,.builder-step { font-size:16px; font-weight:600; }
.personal-info p,.personal-info p:last-child { color:#647372; font-size:12px; margin:10px 0; }
.personal-info select { margin-top:9px; }
.builder-step { margin:22px 0 14px; }
#draft-status { color:var(--blue); }
.ai-editor { margin-top:28px; padding:24px; border:1px solid #b9ccd2; border-radius:10px; background:#f7fafb; }
.ai-editor h3 { font-family:Georgia,serif; font-size:25px; font-weight:400; }
.ai-editor select { margin-top:9px; }
.ai-editor .ai-privacy { font-size:11px; color:#586b72; }
.ai-editor .checkbox-label { display:flex; }
.ai-review { margin:22px 0 12px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.ai-review textarea { margin:7px 0 15px; }
.ai-review li { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
#ai-status,#ai-pool-status { color:var(--blue); overflow-wrap:anywhere; }
.button { border:1px solid var(--line); border-radius:7px; padding:10px 14px; font-weight:500; font-size:13px; min-height:41px; }
.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.primary:hover { background:#173a52; }
.secondary { background:#fff; }
.secondary:hover { background:var(--soft); }
.text-button { background:transparent; border-color:transparent; color:#59666b; }
.text-button:hover { background:#f5f7f6; }
.button:disabled { cursor:wait; opacity:.55; }
.puzzle-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,1fr); }
.board-section { padding:26px 32px 28px; min-width:0; }
.active-clue { min-height:65px; padding:12px 16px; font-size:14px; line-height:1.55; background:var(--soft); border-radius:7px; margin-bottom:18px; }
.solve-word-inputs,.solve-navigation { display:none; }
@media (max-width:760px) {
  .puzzle-card { overflow:visible; }
  .puzzle-card .board-section { padding:12px 10px; }
  .solve-entry-panel { position:sticky; top:calc(var(--solve-viewport-top,0px) + 8px); z-index:2; display:flex; flex-direction:column; gap:8px; background:#fffdf7; padding:6px; border:1px solid var(--line); border-radius:8px; margin-bottom:18px; max-height:calc(var(--solve-visible-height,100dvh) - 16px); overflow-y:auto; overscroll-behavior:contain; }
  .solve-entry-panel .active-clue { flex-shrink:0; min-height:0; max-height:min(120px,calc(var(--solve-visible-height,100dvh) * .30)); overflow-y:auto; overflow-wrap:anywhere; margin:0; padding:8px; font-size:14px; line-height:1.5; }
  .solve-word-inputs { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(28px,calc((100% - (var(--word-columns,8) - 1) * 3px) / var(--word-columns,8)),44px); gap:3px; flex-shrink:0; min-height:58px; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; padding:4px; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .solve-word-square { position:relative; min-width:0; height:50px; border:1px solid #72877c; border-radius:5px; background:#fff; }
  .solve-word-square input { width:100%; height:100%; min-height:0; padding:0; border:0; border-radius:4px; font-size:20px; font-weight:600; text-align:center; text-transform:uppercase; color:var(--ink); background:transparent; touch-action:manipulation; }
  .solve-word-square.active-cell { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue); }
  .solve-word-square.wrong { background:#fff0ed; border-color:#b44936; }
  .solve-word-square.correct { background:#e9f4e6; border-color:#427b3d; }
  .solve-word-square .feedback-mark { position:absolute; right:2px; bottom:1px; font-size:9px; pointer-events:none; }
  .solve-navigation { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; }
  .solve-navigation .button { min-height:44px; touch-action:manipulation; }
  #board .square { touch-action:manipulation; }
}
.board { display:grid; gap:1px; padding:1px; width:100%; max-width:560px; margin:0 auto; background:#33434b; border:1px solid #33434b; }
.style-picker { margin:0 0 18px; }
.style-picker label { max-width:350px; }
.style-picker select { font-size:12px; padding:9px; margin-top:7px; }
.style-picker p { font-size:11px; line-height:1.5; color:#687477; margin:7px 0 0; }
.style-choices { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:420px; min-width:0; }
.style-choices legend { padding:0; margin-bottom:10px; font-size:13px; font-weight:600; }
.style-choices .style-choice { position:relative; margin:0; max-width:none; cursor:pointer; }
.style-choice input { position:absolute; width:1px; height:1px; opacity:0; margin:0; padding:0; top:0; left:0; }
.style-card { display:flex; height:100%; flex-direction:column; align-items:center; padding:10px 8px; gap:5px; border:2px solid #d7dbd7; border-radius:9px; background:#f9faf7; text-align:center; }
.style-card svg { display:block; width:76px; max-width:100%; height:auto; }
.style-card b { font-size:13px; }
.style-card > span { font-size:11px; font-weight:400; color:#59666b; }
.style-choice input:checked + .style-card { border-color:var(--blue); background:#eaf0f0; }
.style-choice input:focus-visible { outline:none; }
.style-choice input:focus-visible + .style-card { outline:3px solid #b67134; outline-offset:3px; }
.style-choice:hover .style-card { border-color:#788b7c; }
.board[data-style],.paper-grid[data-style] { background:#fff; gap:0; padding:0; border:0; }
.board[data-style="party"],.paper-grid[data-style="party"] { background:#fff7eb url('./decor-party.svg') repeat; }
.board[data-style="nature"],.paper-grid[data-style="nature"] { background:#f1f7ee url('./decor-nature.svg') repeat; }
.board[data-style="music"],.paper-grid[data-style="music"] { background:#f0f4fa url('./decor-music.svg') repeat; }
.board[data-style] .square:not(.block) { border:1px solid #53606a; }
.board[data-style] .square.block,.paper-grid[data-style] .paper-cell.block { background:transparent; }
.square { position:relative; aspect-ratio:1; min-width:0; background:#fff; }
.square.block { background:#33434b; }
.square.active-word { background:#e7f1f4; }
.square.active-cell { background:#c9e0eb; box-shadow:inset 0 0 0 2px var(--blue); }
.square.wrong { background:#fbe3df; }
.square.correct { background:#e4f2e7; }
.square .number { position:absolute; top:1px; left:2px; font-size:clamp(7px,.75vw,10px); line-height:1; z-index:1; pointer-events:none; }
.square input { border:0; border-radius:0; background:transparent; padding:4px 0 0; height:100%; min-width:0; text-align:center; font-weight:600; font-size:clamp(16px,1.6vw,21px); outline-offset:0; caret-color:var(--blue); }
.square input:focus { outline:none; }
.square:focus-within { box-shadow:inset 0 0 0 2px var(--blue); }
.board-caption { display:flex; justify-content:space-between; gap:12px; margin:12px 0 22px; font-size:11px; color:#687477; }
.solve-actions { display:flex; flex-wrap:wrap; gap:7px; }
.solve-status { margin:14px 0 0; min-height:21px; font-size:13px; color:var(--blue); line-height:1.6; }
.keyboard-help { margin:14px 0 0; color:#748084; font-size:11px; line-height:1.65; }
.clues { padding:26px 24px; border-left:1px solid var(--line); }
.clues section + section { margin-top:26px; }
.clues h3 { font-family:Georgia,serif; font-weight:400; font-size:21px; margin:0 0 10px; }
.clues h3 span { color:#8b9ba0; margin-left:5px; }
.clue-button { display:grid; grid-template-columns:23px 1fr auto; gap:7px; padding:10px 9px; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid #edf0ed; border-radius:4px; font-size:13px; line-height:1.55; color:var(--ink); }
.clue-button:hover { background:#f5f8f8; }
.clue-button.selected { background:var(--soft); }
.clue-button { grid-template-columns:23px minmax(0,1fr) auto; }
.clue-button span { overflow-wrap:anywhere; min-width:0; }
.clue-button b { color:var(--blue); font-size:12px; padding-top:1px; }
.clue-length { font-size:11px; color:#758489; white-space:nowrap; padding-top:1px; }
.builder { margin:26px 0; background:#edf0eb; border:1px solid var(--line); border-radius:12px; }
summary { padding:21px 26px; font-size:15px; font-weight:500; }
summary span { font-size:12px; color:#677573; font-weight:400; margin-left:18px; }
.builder form { padding:8px 26px 26px; }
.builder-head { display:grid; grid-template-columns:1.6fr 1fr; gap:48px; padding:12px 0; }
.builder h2 { font-family:Georgia,serif; font-size:30px; font-weight:400; margin-bottom:12px; }
.builder p { font-size:13px; line-height:1.65; }
.privacy-note { color:#647372; padding-top:26px; }
.builder-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:16px; }
.builder-fields input { margin-top:9px; }
.builder-settings { margin:16px 0; padding:18px; border:1px solid var(--line); border-radius:7px; background:#fffdf6; }
.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.builder-settings select,.builder-settings input,.builder-theme-settings select { margin-top:8px; }
.builder-settings p { font-size:13px; line-height:1.6; color:#647372; margin:12px 0 0; }
#difficulty-status:empty { display:none; }
#secret-preview { margin-top:14px; border-top:1px solid var(--line); }
#secret-preview summary { padding:12px 0; font-size:14px; }
#secret-preview-word { display:block; font-size:24px; letter-spacing:.15em; padding:6px 0; }
@media (max-width:640px) { .settings-grid { grid-template-columns:1fr; gap:12px; } }
textarea { font-family:ui-monospace,SFMono-Regular,monospace; line-height:1.7; font-size:13px; resize:vertical; }
.input-help { color:#657472; margin:10px 0 18px; font-size:12px!important; }
.builder-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.builder-actions p { margin:0 0 0 6px; }
.builder > summary > b { font-weight:500; }
.editor-context { display:grid; grid-template-columns:minmax(90px,1fr) minmax(0,3fr); gap:8px 20px; padding:18px; margin:16px 0 22px; border:1px solid var(--line); border-radius:10px; background:#fffdf6; font-size:13px; }
.editor-context dt { color:#647372; }
.editor-context dd,#editor-heading { margin:0; overflow-wrap:anywhere; }
.editor-disclosure { margin:18px 0; border:1px solid var(--line); border-radius:10px; padding:0 18px; background:#fffdf6; }
.editor-disclosure > summary { padding:17px 0; font-size:14px; }
.editor-disclosure p { color:#647372; }
.workspace-controls { position:sticky; top:0; z-index:5; margin:24px 0; padding:12px 0; background:var(--paper); border-bottom:1px solid var(--line); }
.workspace-controls > div { display:flex; flex-wrap:wrap; gap:9px; }
.workspace-controls p { font-size:13px; line-height:1.6; color:#627365; max-width:650px; margin:12px 0 0; }
.creator-review { background:#f9faf3; }
.creator-review form { padding-top:26px; }
.creator-review h2 { scroll-margin-top:170px; }
.layout-review { margin:26px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.layout-review h2 { font-size:26px; }
.layout-review .button { margin:8px 8px 0 0; }
.layout-grids { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:20px 0; }
.layout-preview-card { min-width:0; padding:16px; background:#fffdf7; border:1px solid var(--line); border-radius:10px; }
.layout-preview-card h4 { margin:0; }.layout-preview-card p { font-size:13px; }
.layout-preview-grid { display:grid; aspect-ratio:1; max-width:360px; margin:14px auto; background:#fff7ed; }
.layout-preview-grid .preview-square { min-width:0; min-height:0; aspect-ratio:auto; position:relative; border:1px solid #587070; display:grid; place-items:center; }
.layout-preview-grid .preview-block { border:0; background:#faf2e8; }
.layout-preview-grid .preview-letter { font-size:clamp(9px,1.2vw,15px); line-height:1; }
.layout-preview-grid small { position:absolute; top:0; left:1px; font-size:7px; line-height:1; }
.layout-preview-grid b { position:absolute; bottom:0; right:1px; font-size:8px; line-height:1; }
.layout-preview-grid .preview-secret { background:#f4e9ac; }
.layout-change { margin:12px 0; padding:12px; border-left:3px solid #769482; background:#fffdf7; }
.layout-change p { margin:6px 0; overflow-wrap:anywhere; }
.layout-note,#layout-stale { padding:12px; background:#fff1d9; border-radius:8px; }
#layout-words li { margin:10px 0; overflow-wrap:anywhere; }
@media (max-width:640px) { .layout-review { margin:22px 18px; } .layout-grids { grid-template-columns:1fr; gap:12px; } .layout-review .button { max-width:100%; white-space:normal; } .layout-preview-grid .preview-letter { font-size:12px; } }
.creator-review .ai-editor { margin:0 0 18px; padding:16px; }
.creator-review .builder-actions { position:sticky; bottom:0; padding:14px 0; background:#f9faf3; border-top:1px solid var(--line); z-index:3; }
.review-word-origin { grid-column:1 / -1; font-size:11px; margin:0; color:#63755e; }
.review-delivery { margin:0 26px 24px; border-top:1px solid var(--line); }
.review-delivery > summary { padding:18px 0; }
.review-tools { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.review-tools .print-settings { width:auto; }
.review-tools select { margin-top:8px; }
.guest-test #home-intro,.guest-test #open-advanced,.guest-test #draft-saving details,.guest-test #draft-saving .account-actions { display:none; }
.guest-test .puzzle-header { background:#fffdf7; }
.guest-test #puzzle-title { scroll-margin-top:170px; }
@media (max-width:640px) { .review-tools { grid-template-columns:1fr; gap:12px; } .review-delivery { margin:0 18px 22px; } .creator-review input { font-size:16px; } }
.editor-disclosure input,.editor-disclosure select { margin-top:8px; }
.puzzle-edit-row { display:grid; grid-template-columns:minmax(100px,1fr) minmax(0,3fr) auto; gap:12px; align-items:end; border-bottom:1px solid var(--line); padding:15px 0; }
.puzzle-edit-row label { min-width:0; font-size:12px; }
.puzzle-edit-row input { font-size:14px; }
#editor-words h3 { margin:22px 0 14px; font-size:17px; }
#editor-words > button { margin-bottom:18px; }
#editor-secret-field { margin:18px 0; max-width:400px; }
#editor-status { margin:14px 0 0; color:#536859; }
#editor-error { margin:14px 0 0; padding:12px; color:#902a26; background:#ffefeb; border-radius:6px; }
@media (max-width:640px) { .puzzle-edit-row { grid-template-columns:minmax(0,1fr) auto; } .puzzle-edit-row label:has(.editor-clue) { grid-column:1 / -1; } .puzzle-edit-row button { grid-column:2; grid-row:2; } .editor-disclosure { padding:0 12px; } }
#generation-error { margin:14px 0 0; color:#902a26; background:#ffefeb; border-radius:6px; padding:12px 15px; }
.footer { display:flex; justify-content:space-between; gap:20px; margin:27px 0 40px; font-size:11px; color:#74807d; }
.print-sheet { display:none; }
[hidden] { display:none!important; }
.theme-controls { padding:20px 32px; display:grid; grid-template-columns:1fr 1fr; gap:28px; border-bottom:1px solid var(--line); background:#f8faf7; }
fieldset { border:0; padding:0; margin:0; }
legend { font-size:13px; margin-bottom:12px; font-weight:600; }
.checkbox-label { display:inline-flex; align-items:center; gap:7px; margin:0 18px 8px 0; font-size:13px; font-weight:400; }
input[type="checkbox"] { width:16px; height:16px; padding:0; accent-color:var(--blue); }
.theme-controls p:last-child { color:#647372; font-size:12px; line-height:1.6; margin:9px 0 0; }
.comparison { padding:22px 32px; border-bottom:1px solid var(--line); }
.comparison h3 { font-family:Georgia,serif; font-size:23px; font-weight:400; margin-bottom:9px; }
.comparison > p { font-size:13px; line-height:1.6; color:#647372; }
.comparison table { width:100%; border-collapse:collapse; font-size:13px; }
.comparison th,.comparison td { text-align:left; padding:8px 10px; border-bottom:1px solid #e8eeeb; }
.comparison th { font-weight:500; }
.comparison thead th { color:#647372; font-size:11px; }
.comparison td:last-child { font-weight:600; color:var(--blue); }
.comparison p.comparison-note { font-size:11px; margin:12px 0 0; }
.square.secret-cell { background:#fff2cd; }
.square.secret-cell.active-word { background:#f8e6af; }
.square.secret-cell.active-cell { background:#efd496; }
.square.secret-cell.wrong { background:#fbe3df; }
.square.secret-cell.correct { background:#e4f2e7; }
.secret-marker { position:absolute; bottom:1px; right:1px; z-index:1; font-size:8px; line-height:1; padding:1px; color:#624510; background:#f4d782; pointer-events:none; }
.secret-panel { margin-top:24px; padding:18px; border:1px solid #e8d6a7; border-radius:8px; background:#fffaf0; }
.secret-panel h3 { font-family:Georgia,serif; font-weight:400; font-size:21px; margin-bottom:9px; }
.secret-panel p { font-size:12px; line-height:1.65; color:#6c614a; }
.secret-panel p:last-child { margin:12px 0 0; min-height:20px; }
.secret-letters { display:flex; gap:5px; flex-wrap:wrap; }
.secret-letter { width:34px; height:40px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:1px solid #e1c889; border-radius:5px; padding:2px; color:var(--ink); }
.secret-index { font-size:8px; color:#796138; }
.secret-value { font-size:18px; min-height:22px; font-weight:500; }
.builder-theme-settings { margin:4px 0 18px; padding:16px; border:1px solid var(--line); border-radius:7px; background:#f8faf7; }
.builder-theme-settings fieldset { margin:10px 0 14px; }
.builder-theme-settings > label:last-of-type { display:block; margin-top:14px; max-width:460px; }
.builder-theme-settings input[type="text"],#secret-input { margin-top:8px; }
.builder-theme-settings p { color:#647372; margin:9px 0 0; }
@media (max-width:760px) { .theme-controls { grid-template-columns:1fr; gap:12px; padding:20px; } .comparison { padding:20px; } .comparison th,.comparison td { padding:8px 5px; font-size:12px; } .secret-marker { font-size:7px; padding:0; } }
@media (max-width:1000px) { .app-shell { padding:0 28px; } .intro { gap:30px; } .puzzle-layout { grid-template-columns:1fr 1fr; } .board-section { padding:22px; } .clues { padding:22px 18px; } .puzzle-header { padding:24px; } }
@media (max-width:760px) { h1 br { display:none; } .demo-picker { max-width:none; justify-self:stretch; } .puzzle-layout { grid-template-columns:1fr; } .board { max-width:560px; } .clues { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:18px; } .clues section + section { margin:0; } .square input { font-size:clamp(16px,4vw,22px); } .square .number { font-size:9px; } .builder-head { grid-template-columns:1fr; gap:0; } .privacy-note { padding-top:0; } .puzzle-header { align-items:start; } .print-actions { justify-content:end; max-width:150px; } summary span { display:block; margin:8px 0 0 18px; } }
@media (max-width:440px) { .app-shell { padding:0 14px; } .masthead { align-items:center; padding:12px 0; } .brand { font-size:23px; gap:9px; } .brand span { font-size:16px; } .prototype-label { font-size:10px; max-width:90px; text-align:right; line-height:1.5; } h1 { font-size:38px; } .puzzle-header { padding:20px; flex-direction:column; gap:16px; } .print-actions { max-width:none; } .board-section { padding:18px 13px; } .active-clue { font-size:13px; padding:12px; } .clues { grid-template-columns:1fr; padding:20px; gap:22px; } .builder-fields { grid-template-columns:1fr; gap:8px; } .builder form { padding:8px 18px 22px; } summary { padding:20px 18px; } .footer { flex-direction:column; gap:8px; } .square .number { font-size:7px; left:1px; } .button { min-height:44px; padding:10px 11px; } }
@media (max-width:1000px) { .print-settings { width:275px; } }
@media (max-width:760px) { .puzzle-header { flex-wrap:wrap; } .print-settings { max-width:100%; width:100%; } .print-actions { max-width:none; justify-content:start; } }
@page { size:A4; margin:12mm; }
.start-guide { display:flex; align-items:center; gap:12px; margin-top:20px; width:100%; padding:10px 18px; font-size:15px; }
.start-guide img { transform:rotate(-9deg); }
.start-guide span { margin-left:auto; font-size:23px; }
.creator-guide { padding:0; border:1px solid #d9d9ce; border-radius:24px; width:min(760px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); color:var(--ink); background:#fffdf7; box-shadow:0 30px 100px #172e4355; }
.creator-guide::backdrop { background:#172e4370; backdrop-filter:blur(6px); }
.creator-guide form { display:flex; flex-direction:column; max-height:calc(100dvh - 34px); }
.guide-header { display:flex; justify-content:space-between; align-items:center; padding:18px 30px; border-bottom:1px solid #e7e4d8; }
.guide-brand { font-size:20px; letter-spacing:-.7px; font-weight:650; }
.guide-brand i { font:italic 16px Georgia,serif; color:#788579; margin-left:8px; }
.guide-close { width:36px; height:36px; border:1px solid #e1e4da; border-radius:50%; font-size:25px; background:transparent; color:#5c6c65; }
.guide-close:hover { background:#f0f2e8; }
.guide-phases { list-style:none; margin:0; padding:12px 20px; display:flex; gap:8px; border-bottom:1px solid #e7e4d8; flex-shrink:0; }
.guide-phases li { flex:1; display:flex; gap:7px; align-items:center; font-size:12px; color:#73796d; }
.guide-phase-number { width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; border:1px solid #d7ded0; border-radius:50%; }
.guide-phases .is-current { color:var(--ink); font-weight:650; }
.guide-phases .is-current .guide-phase-number { background:#dce7ce; border-color:#9eaf8f; }
.guide-phases .is-complete .guide-phase-number { background:#eef2e7; }
.guide-fact-nav { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; }
.guide-fact-nav [aria-current] { background:#dce7ce; border-color:#9eaf8f; }
.guide-secret-choice { margin-bottom:20px; }
.guide-difficulty { margin:0 0 18px; border:1px solid #e1e4da; border-radius:12px; }
.guide-difficulty .guide-levels { padding:0 14px 14px; }
@media (max-width:440px) { .guide-phases { padding:10px 12px; gap:5px; } .guide-phases li { font-size:11px; gap:5px; } .guide-phase-number { width:21px; height:21px; } }
.guide-scroll { overflow-y:auto; min-height:0; padding:25px 38px 32px; overscroll-behavior:contain; }
.guide-header,.guide-footer { flex-shrink:0; }
.guide-kicker { font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:#6a7863; margin:0 0 17px; }
.guide-introduction { display:flex; align-items:center; gap:20px; margin:0 0 26px; }
.penny-wrap { position:relative; flex:0 0 114px; width:114px; height:144px; display:grid; place-items:center; }
.penny-wrap::before { content:''; position:absolute; top:18px; width:104px; height:104px; background:#f5e9bc; border-radius:42% 58% 61% 39%; transform:rotate(-8deg); }
.penny-avatar { position:relative; width:120px; height:135px; padding:0; background:transparent; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.penny-avatar:focus-visible { outline:2px solid #80966b; outline-offset:2px; border-radius:28px; }
.penny-live { width:100%; height:100%; overflow:visible; }
.penny-character { transform-origin:80px 149px; }
.penny-eye { transform-box:fill-box; transform-origin:center; }
.penny-gaze { transform:translate(var(--penny-gaze-x,0px),var(--penny-gaze-y,0px)); transition:transform .25s ease-out; }
.penny-arm-left { transform-origin:58px 103px; }
.penny-arm-right { transform-origin:102px 98px; }
.penny-brow-left { transform-origin:68px 71px; }
.penny-brow-right { transform-origin:92px 71px; }
.penny-arm-wave,.penny-arm-think,.penny-arm-point,.penny-eyes-happy,.penny-mouth-grin,.penny-mouth-think,.penny-mouth-soft,.penny-thoughts,.penny-heart { display:none; }
.penny-sparkles { opacity:.4; }
:is(.creator-guide[open],.penny-start) .penny-character { animation:penny-breathe 4.4s ease-in-out infinite; }
:is(.creator-guide[open],.penny-start) .penny-eye { animation:penny-blink 5.3s ease-in-out infinite; }
.penny-avatar[data-mood="welcome"] .penny-arm-rest,.penny-avatar[data-mood="thinking"] .penny-arm-rest,.penny-avatar[data-mood="ready"] .penny-arm-rest { display:none; }
.penny-avatar[data-mood="welcome"] .penny-arm-wave { display:inline; }
:is(.creator-guide[open],.penny-start) .penny-avatar[data-mood="welcome"] .penny-arm-wave { animation:penny-wave 2.4s ease-in-out infinite; }
.penny-avatar[data-mood="welcome"] .penny-mouth-smile,.penny-avatar[data-mood="happy"] .penny-mouth-smile,.penny-avatar[data-mood="thinking"] .penny-mouth-smile,.penny-avatar[data-mood="reassuring"] .penny-mouth-smile { display:none; }
.penny-avatar[data-mood="welcome"] .penny-mouth-grin,.penny-avatar[data-mood="happy"] .penny-mouth-grin { display:inline; }
.penny-avatar[data-mood="curious"] .penny-brow-right { transform:translateY(-4px) rotate(-12deg); }
:is(.creator-guide[open],.penny-start) .penny-avatar[data-mood="curious"] .penny-character { animation:penny-curious 4.6s ease-in-out infinite; }
.penny-avatar[data-mood="thinking"] .penny-arm-think,.penny-avatar[data-mood="thinking"] .penny-mouth-think,.penny-avatar[data-mood="thinking"] .penny-thoughts { display:inline; }
.penny-avatar[data-mood="thinking"] .penny-brow-left { transform:translateY(-3px); }
.penny-avatar[data-mood="thinking"] .penny-brow-right { transform:rotate(14deg); }
.penny-avatar[data-mood="thinking"] .penny-gaze { transform:translate(2px,-2px); }
:is(.creator-guide[open],.penny-start) .penny-avatar[data-mood="thinking"] .penny-character { animation:penny-ponder 3s ease-in-out infinite; }
:is(.creator-guide[open],.penny-start) .penny-thoughts circle { animation:penny-thought 1.8s ease-in-out infinite; }
.penny-thoughts circle:nth-child(2) { animation-delay:.25s; }.penny-thoughts circle:nth-child(3) { animation-delay:.5s; }
.penny-avatar[data-mood="ready"] .penny-arm-point { display:inline; }
.penny-avatar[data-mood="happy"] .penny-eyes-open { display:none; }
.penny-avatar[data-mood="happy"] .penny-eyes-happy { display:inline; }
.penny-avatar[data-mood="happy"] .penny-arm-left { transform:rotate(35deg); }
.penny-avatar[data-mood="happy"] .penny-arm-rest { transform:rotate(-35deg); }
:is(.creator-guide[open],.penny-start) .penny-avatar[data-mood="happy"] .penny-character { animation:penny-celebrate 2.8s ease-in-out infinite; }
:is(.creator-guide[open],.penny-start) .penny-avatar[data-mood="happy"] .penny-sparkles { animation:penny-shine 2.8s ease-in-out infinite; }
.penny-avatar[data-mood="reassuring"] .penny-mouth-soft,.penny-avatar[data-mood="reassuring"] .penny-heart { display:inline; }
.penny-avatar[data-mood="reassuring"] .penny-brow-left { transform:rotate(-12deg); }
.penny-avatar[data-mood="reassuring"] .penny-brow-right { transform:rotate(12deg); }
.penny-avatar[data-reaction="wave"] .penny-arm-rest,.penny-avatar[data-reaction="wave"] .penny-arm-think,.penny-avatar[data-reaction="wave"] .penny-arm-point { display:none; }
.penny-avatar[data-reaction="wave"] .penny-arm-wave { display:inline; }
:is(.creator-guide[open],.penny-start) .penny-avatar[data-reaction="wave"] .penny-arm-wave { animation:penny-wave .6s ease-in-out 2; }
:is(.creator-guide[open],.penny-start) .penny-avatar[data-reaction="nod"] .penny-character { animation:penny-nod 1.2s ease-in-out; }
@keyframes penny-breathe { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-3px) rotate(1deg); } }
@keyframes penny-blink { 0%,89%,94%,100% { transform:scaleY(1); } 91%,92% { transform:scaleY(.06); } }
@keyframes penny-wave { 0%,35%,100% { transform:rotate(0); } 10%,25% { transform:rotate(15deg); } 18% { transform:rotate(-8deg); } }
@keyframes penny-curious { 0%,100% { transform:rotate(-5deg); } 45%,65% { transform:translateY(-2px) rotate(5deg); } }
@keyframes penny-ponder { 0%,100% { transform:rotate(5deg) translateY(0); } 50% { transform:rotate(-2deg) translateY(-3px); } }
@keyframes penny-thought { 0%,100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
@keyframes penny-celebrate { 0%,60%,100% { transform:translateY(0) rotate(-2deg); } 15% { transform:translateY(-7px) rotate(4deg); } 30% { transform:translateY(0) rotate(-4deg); } 42% { transform:translateY(-4px) rotate(2deg); } }
@keyframes penny-shine { 0%,60%,100% { opacity:.35; } 20%,40% { opacity:1; } }
@keyframes penny-nod { 0%,100% { transform:rotate(-3deg); } 35% { transform:translateY(3px) rotate(4deg); } 65% { transform:translateY(-2px) rotate(-3deg); } }
.penny-speech { margin:0; background:#f1f4e9; border:1px solid #e0e7d4; border-radius:18px 18px 18px 4px; padding:17px 20px; font-size:14px; line-height:1.65; color:#3f5142; flex:1; min-width:0; overflow-wrap:anywhere; }
.creator-guide h2 { font:400 clamp(26px,3.5vw,36px)/1.15 Georgia,serif; letter-spacing:-.7px; margin:0 0 12px; }
.creator-guide h2,.guide-summary dd { overflow-wrap:anywhere; }
.guide-description { font-size:14px; line-height:1.6; color:#718079; margin-bottom:25px; }
#guide-content { animation:guide-arrive .2s ease-out; }
.guide-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.guide-choice { display:flex; align-items:center; gap:14px; text-align:left; padding:19px 16px; background:#fff; border:1px solid #dce2d6; border-radius:14px; color:var(--ink); min-height:113px; }
.guide-choice:hover { border-color:#91aa7b; background:#f9fbf5; transform:translateY(-1px); }
.guide-choice[aria-pressed="true"] { background:#eff5e7; border-color:#75965e; box-shadow:inset 0 0 0 1px #75965e; }
.choice-icon { color:#557644; font:32px Georgia,serif; flex-shrink:0; }
.choice-copy { display:grid; gap:7px; min-width:0; }
.choice-copy strong { font-size:15px; font-weight:600; }
.choice-copy > span { font-size:12px; line-height:1.55; color:#738072; }
.choice-arrow { font-size:19px; color:#638454; margin-left:auto; }
.guide-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.guide-chip { border:1px solid #d5dfcb; border-radius:50px; padding:12px 17px; font-size:14px; background:#fff; color:#43523f; }
.guide-chip[aria-pressed="true"] { background:#dceacb; border-color:#809d65; box-shadow:inset 0 0 0 1px #809d65; }
.guide-field { font-size:13px; color:#40534b; margin:0 0 21px; }
.guide-field input,.guide-field select,.guide-field textarea { margin-top:10px; font-size:17px; padding:15px 16px; border-color:#cdd9c6; border-radius:10px; }
.guide-field-hint { display:block; margin-top:8px; font-size:12px; font-weight:400; line-height:1.5; color:#647568; }
.guide-field [aria-invalid="true"] { border-color:#b23c26; }
.guide-stories { border:1px solid #d5dfcb; border-radius:14px; margin:0 0 24px; background:#f7faf2; }
.guide-stories > summary { padding:16px; color:#40534b; font-size:15px; line-height:1.5; }
.guide-stories > .guide-small { margin:0 16px 16px; }
.guide-story-categories { display:flex; flex-wrap:wrap; gap:8px; margin:0 16px 18px; }
.guide-story-categories .guide-chip { font-size:12px; padding:9px 12px; min-height:44px; }
.guide-story-fields { padding:0 16px 20px; }
.guide-story-prompt { font-size:14px; line-height:1.65; margin:0 0 18px; color:#40534b; }
.guide-story-fields textarea { resize:vertical; min-height:110px; font-family:inherit; font-weight:400; line-height:1.5; }
.guide-story-fields > .button { margin:0 0 16px; }
.guide-story-reviewed { display:flex; align-items:start; gap:9px; font-size:13px; line-height:1.6; margin:0 0 18px; }
.guide-story-reviewed input { width:19px; height:19px; margin-top:2px; flex-shrink:0; }
.guide-story-candidate { border-left:3px solid #9eaf8f; padding:0 0 0 12px; margin:18px 0; font-size:14px; line-height:1.65; }
.guide-story-candidate .button { font-size:12px; }
.guide-own-heading { font-size:16px; margin:24px 0 18px; }
.guide-own-copy { min-width:0; overflow-wrap:anywhere; }
.guide-story-source { margin-top:6px; }
.guide-story-source summary { padding:8px 0; font-size:11px; }
.guide-story-source p { white-space:pre-wrap; }
.guide-draft-status { padding:16px; margin:0 0 16px; background:#eef4e7; border-radius:12px; color:#40534b; font-size:14px; line-height:1.6; }
.guide-draft-status p { margin:0 0 12px; }
.guide-draft-status .button { white-space:normal; }
.guide-ai-options { margin-top:24px; border-top:1px solid #d5dfcb; padding-top:10px; }
.guide-ai-options > summary { padding:12px 0; font-size:14px; }
.guide-ai-options .guide-consent { margin-top:18px; }
.guide-ai-options > .button { margin-top:18px; }
.guide-small { font-size:11px; line-height:1.65; color:#768276; margin:18px 0 0; }
.guide-privacy { margin-top:16px; font-size:12px; color:#65765e; }
.guide-privacy summary { padding:8px 0; cursor:pointer; }
.guide-privacy .guide-small { margin-top:8px; }
.guide-footer { display:flex; flex-wrap:wrap; gap:12px; padding:17px 30px; border-top:1px solid #e1e5d8; background:#f8faf1; }
.guide-footer #guide-next { margin-left:auto; padding:13px 24px; }
.guide-footer-note { width:100%; font-size:10px; text-align:center; color:#7e8979; }
.guide-levels { display:grid; gap:10px; }
.guide-levels .guide-choice { min-height:78px; }
.guide-tuning { margin-top:25px; border-top:1px solid #e1e5d8; }
.guide-tuning summary,.guide-review-words summary { padding:16px 0; font-size:13px; color:#52664c; }
.guide-tuning-fields { padding-top:8px; }
.guide-tuning-fields .guide-field input,.guide-tuning-fields .guide-field select { font-size:14px; }
.guide-summary { display:grid; grid-template-columns:1fr 1.6fr; gap:12px; padding:22px; background:#fff; border:1px solid #e1e5d8; border-radius:14px; margin-bottom:25px; font-size:13px; }
.guide-summary dt { color:#7b8876; }
.guide-summary dd { margin:0; font-weight:500; }
.guide-consent { display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:500; line-height:1.6; }
.guide-consent input { width:19px; height:19px; flex-shrink:0; margin-top:1px; }
.guide-error { margin:20px 0 0; padding:13px 16px; border-radius:10px; color:#8a382c; background:#fff0e7; font-size:13px; line-height:1.6; }
.guide-cooking { padding:22px 0; text-align:center; color:#65785c; }
.cooking-spark { font-size:62px; display:inline-block; animation:penny-thinking 2s ease-in-out infinite; color:#bb9a3a; }
.guide-preview-overview { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; padding:20px; background:#fff; border:1px solid #e1e5d8; border-radius:14px; }
.guide-preview-grid { display:grid; width:100%; background:#fff; }
.guide-preview-grid[data-style="party"] { background:#fff7eb url('./decor-party.svg') repeat; }
.guide-preview-grid[data-style="nature"] { background:#f1f7ee url('./decor-nature.svg') repeat; }
.guide-preview-grid[data-style="music"] { background:#f0f4fa url('./decor-music.svg') repeat; }
.preview-square { display:block; aspect-ratio:1; border:1px solid #63706a; background:white; position:relative; }
.preview-block { background:transparent; border:0; }
.preview-secret { background:#fff0c3; }
.preview-square small { position:absolute; font-size:7px; top:1px; left:1px; }
.preview-square b { position:absolute; font-size:6px; right:1px; bottom:1px; color:#8b6d27; }
.guide-preview-stats strong { font:22px/1.2 Georgia,serif; }
.guide-preview-stats p { font-size:12px; line-height:1.65; color:#71806b; margin:10px 0; }
.guide-secret-reveal summary { padding:10px 0; font-size:11px; }
.guide-secret-reveal strong { font-size:16px; letter-spacing:.15em; }
.guide-review-list { display:grid; gap:14px; }
.guide-review-row { display:grid; grid-template-columns:1fr auto; gap:5px; margin:0; padding-bottom:14px; border-bottom:1px solid #e6eade; }
.guide-answer { font-size:12px; letter-spacing:.06em; color:#43533d; }
.guide-word-origin { font-size:10px; font-weight:400; color:#8c9982; }
.guide-review-row input { grid-column:1 / -1; font-size:13px; padding:12px; line-height:1.5; }
.guide-warnings,.guide-note { font-size:12px; line-height:1.65; color:#7e6534; background:#fff4d8; padding:15px 25px; border-radius:10px; }
.guide-accept { width:100%; margin-top:24px; padding:15px!important; font-size:15px; }
.guide-own-list { padding:0; list-style:none; }
.guide-own-list li { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #e2e8d8; font-size:12px; line-height:1.5; }
.guide-own-list button { margin-left:auto; flex-shrink:0; }
@keyframes guide-arrive { from { opacity:.4; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes penny-thinking { 0%,100% { transform:rotate(-6deg) translateY(0); } 50% { transform:rotate(6deg) translateY(-5px); } }
@media (max-width:560px) {
  .creator-guide { width:calc(100vw - 16px); border-radius:18px; max-height:calc(100dvh - 16px); }
  .creator-guide form { max-height:calc(100dvh - 18px); }
  .guide-header { padding:13px 18px; }
  .guide-scroll { padding:20px; }
  .guide-introduction { gap:10px; margin-bottom:22px; }
  .penny-wrap { flex-basis:80px; width:80px; height:108px; }
  .penny-wrap::before { width:76px; height:76px; top:14px; }
  .penny-avatar { width:88px; height:99px; }
  .penny-status { font-size:9px; }
  .penny-speech { padding:13px; font-size:12px; }
  .guide-choices { grid-template-columns:1fr; gap:9px; }
  .guide-choice { min-height:80px; padding:15px; }
  .guide-footer { padding:13px 16px; gap:8px; }
  .guide-footer #guide-next { padding:11px 16px; }
  .guide-preview-overview { grid-template-columns:1fr; gap:16px; padding:18px; }
  .guide-preview-grid { max-width:270px; margin:auto; }
  .guide-summary { padding:16px; gap:11px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { #guide-content,.penny-avatar,.penny-live *,.cooking-spark { animation:none!important; transition:none!important; } #guide-progress-bar { transition:none; } .guide-choice:hover { transform:none; } }
@media print { .creator-guide { display:none!important; } }
.action-confirm { width:min(460px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:28px; border:1px solid var(--line); border-radius:18px; background:#fffdf7; color:var(--ink); box-shadow:0 18px 70px #142d3840; overflow:auto; }
.action-confirm::backdrop { background:#142d3870; backdrop-filter:blur(3px); }
.action-confirm h2 { font-family:Georgia,serif; font-size:28px; font-weight:400; line-height:1.15; }
.action-confirm p { font-size:16px; line-height:1.65; overflow-wrap:anywhere; }
.action-confirm .builder-actions { justify-content:flex-end; margin-top:24px; }
/* iOS may zoom focused controls below 16px. Keep pinch zoom available, and
   cover the editor/guide too, not just the letter cells. */
@media (max-width:760px) {
  input:not([type=checkbox]):not([type=radio]),select,textarea { font-size:max(16px,1rem)!important; min-width:0; }
  .square input { padding:3px 0 0; line-height:1; }
  .action-confirm { padding:24px; }
}
@media print { .action-confirm { display:none!important; } }
@media print { :root,body { background:#fff; color:#000; } .app-shell,noscript { display:none!important; } .print-sheet { display:block; } .print-sheet h1 { font-size:25pt; margin:0 0 4mm; } .print-subtitle { font-size:10pt; margin-bottom:6mm; } .paper-grid { display:grid; gap:0; padding:0; background:#eef1ee; width:130mm; margin:0 auto 7mm; print-color-adjust:exact; -webkit-print-color-adjust:exact; } .paper-cell { position:relative; aspect-ratio:1; border:.5pt solid #25343c; background:#fff; text-align:center; font-size:12pt; padding-top:1mm; } .paper-cell.block { background:#eef1ee; border:0; } .paper-cell .number { position:absolute; top:.2mm; left:.4mm; font-size:6pt; } .paper-clues { display:grid; grid-template-columns:1fr 1fr; gap:8mm; } .paper-clues h2 { font-size:13pt; margin:0 0 3mm; } .paper-clues p { font-size:9pt; line-height:1.4; margin:0 0 2.5mm; break-inside:avoid; } .paper-footer { border-top:1px solid #bbb; margin-top:6mm; padding-top:3mm; font-size:8pt; color:#444; } }
@media print { .paper-cell.secret-cell { background:#fff2cd; } .paper-cell .secret-marker { font-size:5pt; padding:.3mm; } .paper-secret { margin:0 0 6mm; break-inside:avoid; } .paper-secret > p { font-size:9pt; margin:0 0 2mm; } .paper-secret .secret-letter { width:7mm; height:9mm; } .paper-secret .secret-value { font-size:12pt; } .paper-secret .secret-index { font-size:6pt; } }
@media print { .compact-print h1 { font-size:22pt; margin-bottom:3mm; } .compact-print .print-subtitle { font-size:9pt; margin-bottom:4mm; } .compact-print .paper-grid { margin-bottom:5mm; } .compact-print .paper-cell { font-size:10.5pt; padding-top:1.6mm; } .compact-print .paper-cell .number { font-size:5pt; } .compact-print .paper-clues p { font-size:8.5pt; line-height:1.3; margin-bottom:1.2mm; } .compact-print .paper-clues h2 { margin-bottom:2mm; } .compact-print .paper-secret { margin-bottom:4mm; } .compact-print .paper-secret .secret-letter { height:8mm; } .compact-print .paper-footer { margin-top:4mm; padding-top:2mm; } }
@media print {
  .paper-grid { break-inside:avoid; }
  .paper-cell,.compact-print .paper-cell { font-size:var(--paper-letter-size,12pt); display:flex; align-items:center; justify-content:center; padding:.6mm 0 0; }
  .print-sheet h1 { overflow-wrap:anywhere; }
  .print-subtitle,.paper-clues p { overflow-wrap:anywhere; }
  .paper-cell .number { line-height:1; }
  .separate-print .paper-board-page { break-inside:avoid; }
  .separate-print .paper-clue-page { break-before:page; }
  .separate-print h1 { font-size:20pt; line-height:1.12; }
  .separate-print .print-subtitle { font-size:9pt; line-height:1.35; margin-bottom:4mm; }
  .separate-print .paper-clue-page h1 { margin-bottom:8mm; }
  .paper-page-note { font-size:9pt; color:#555; margin:2mm 0 0; }
  .separate-print .paper-clues p { font-size:10pt; margin-bottom:3mm; }
}

/* Draft state stays visible outside the guide and wraps on small screens. */
.draft-saving { margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: #edf2ec; border-radius: 14px; overflow-wrap: anywhere; }
.draft-saving p { margin: .4rem 0; }
.draft-saving [data-state="saved"] { color: #31533f; }
.draft-saving details { margin-top: .7rem; font-size: .875rem; }
.draft-saving summary { cursor: pointer; }
.draft-saving .button { white-space: normal; }
.guide-footer-note { overflow-wrap: anywhere; }
.account-pause { max-width: 560px; margin: 8vh auto; padding: 28px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; overflow-wrap: anywhere; }
.account-pause h1 { font-family: Georgia,serif; font-size: 30px; font-weight: 400; }
.account-pause p { line-height: 1.6; }
@media (max-width: 600px) { .account-pause { margin: 32px 16px; padding: 24px; } }
@media print { .account-pause { display: none!important; } }
@media print { .draft-saving { display: none; } }

.account-actions, .account-flow-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.account-actions { margin:8px 0; }
.account-pause form label { display:block; font-weight:600; margin-top:18px; }
.account-pause form input { width:100%; box-sizing:border-box; margin:8px 0; padding:12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:white; }
#account-code { max-width:220px; font-size:24px; letter-spacing:.2em; }
#account-error { color:#963b30; }
.account-pause button { white-space:normal; }
#guide-account { padding:6px; font-size:12px; margin-left:auto; }

.library-link { display:flex; align-items:center; min-height:44px; color:var(--ink); margin-left:auto; font-size:14px; }
.library-view main > :not(#my-crosswords):not(#navigation-error) { display:none; }
.library-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.library-heading h1 { font:400 38px Georgia,serif; margin:8px 0 12px; }
.library-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin:24px 0; }
.library-card { border:1px solid var(--line); border-radius:16px; background:var(--paper,#fff); padding:22px; overflow-wrap:anywhere; }
.library-card h2 { font:400 24px Georgia,serif; margin:16px 0 8px; }
.library-preview { display:grid; gap:1px; width:150px; margin:0 auto; background:#dce4dc; padding:6px; border-radius:8px; }
.library-preview span { aspect-ratio:1; background:#dce4dc; }
.library-preview .filled { background:#fff; border:1px solid #708374; }
.library-placeholder { display:flex; gap:16px; align-items:center; min-height:110px; color:#48614e; background:#edf2ec; border-radius:8px; padding:18px; }
.library-placeholder img { width:58px; height:66px; }
.library-card small,.library-note { color:#52645b; }
.library-card .account-actions { margin-top:18px; }
.library-card .button { white-space:normal; }
@media (max-width:600px) { .library-heading { display:block; } .library-heading .button { margin-top:14px; } .library-heading h1 { font-size:32px; } }
@media print { #my-crosswords { display:none!important; } }

.review-advice-list { grid-column:1 / -1; min-width:0; }
.review-advice { margin-top:8px; padding:12px; border:1px solid #d3ded0; border-radius:8px; background:#f3f6ef; color:var(--ink); overflow-wrap:anywhere; }
.review-advice p { font-size:14px; margin:0 0 10px; line-height:1.5; }
.penny-quality-options { margin:12px 0; font-size:14px; }
.penny-quality-options summary { cursor:pointer; color:var(--muted); }
.penny-quality-options .checkbox-label { margin-top:12px; }
.penny-feedback { grid-column:1/-1; max-width:100%; overflow-wrap:anywhere; min-height:3rem; color:#48614e; font-size:14px; line-height:1.5; }
.penny-feedback p { margin:4px 0; }
.penny-feedback-indicators { font-size:13px; color:var(--muted); }
.penny-feedback .button { white-space:normal; min-height:44px; padding:8px 12px; }
/* Leave the reduced mobile editing viewport to the field and its feedback. */
@media (max-width:640px) and (max-height:500px) {
  .workspace-controls, .creator-review .builder-actions { position:static; }
}
.review-advice-suggestion { font-weight:600; }
.review-advice-actions { display:flex; flex-wrap:wrap; gap:8px; }
.puzzle-edit-row .review-advice button { grid-column:auto; grid-row:auto; white-space:normal; max-width:100%; min-height:42px; }

/* The preview is the same vector page used by the downloadable PDFs. */
.pdf-preview { display:grid; gap:16px; margin-top:12px; min-width:0; }
.print-settings, .review-tools > div { min-width:0; }
.pdf-preview svg { display:block; width:100%; height:auto; background:white; border:1px solid #d4d9d2; box-shadow:0 3px 12px #20384b12; }
.print-settings .checkbox-label { margin-top:12px; }
.print-settings p { font-size:13px; line-height:1.5; }
#pdf-error { color:#843a2e; font-size:14px; line-height:1.5; margin:12px 0; }
#pdf-retry { padding-left:0; }
#pdf-zoom { padding-left:0; }
.pdf-preview.is-zoomed { display:block; max-height:70vh; overflow:auto; }
.pdf-preview.is-zoomed svg { width:794px; max-width:none; margin-bottom:16px; }
.pdf-preview:focus-visible { outline:3px solid #244f6c; outline-offset:3px; }
@media print { .pdf-preview, #pdf-status, #pdf-error, #pdf-retry, #pdf-zoom { display:none; } }

.purchase-panel { padding:20px; margin:20px 0; border:1px solid #ccd8cd; border-radius:14px; background:#f0f4ed; }
.purchase-panel h3 { margin:8px 0; }
.purchase-panel p { line-height:1.6; }
.purchase-test-note { font-size:14px; color:#48614e; }
#purchase-error { margin-top:12px; color:#843a2e; }
@media (max-width:600px) { .purchase-panel { padding:16px; } .purchase-panel .button { white-space:normal; } }
@media print { .purchase-panel { display:none; } }
.library-card p.library-note { margin-top:12px; line-height:1.5; }
.purchase-return { padding:20px; margin-bottom:24px; border:1px solid var(--line); border-radius:16px; background:#edf2ec; }
.purchase-return h2 { font:400 26px Georgia,serif; margin:0 0 12px; }
.purchase-return .library-cards { margin:16px 0 0; grid-template-columns:minmax(0,1fr); }
.purchase-return .library-card h3 { font:400 24px Georgia,serif; margin:0 0 12px; }

.purchase-recovery { margin-top:1.8rem; padding:1.1rem; background:#eef3ed; border:1px solid #d4dfd2; border-radius:16px; }
.recovery-cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); margin-top:1rem; }
.recovery-card { background:var(--paper,#fffdf7); padding:1rem; border-radius:12px; }
.recovery-card h3 { margin-top:0; } .recovery-card .button { margin-top:.7rem; }
.recovery-reference { overflow-wrap:anywhere; font-size:.85rem; } .recovery-help { margin-top:1rem; }
#recovery-error { color:#8a302b; }

.publication-controls { border: 0; padding: 0; margin: 1rem 0; min-width: 0; }
#review-publications { scroll-margin-top: 170px; }
.publication-controls legend { font-weight: 700; margin-bottom: .7rem; }
.publication-controls input[type=date] { max-width: 100%; }
.publication-item { border-top: 1px solid var(--line, #deddd5); padding: .65rem 0; overflow-wrap: anywhere; }
#publication-selected { padding: .8rem; background: #edf1e9; border-radius: .7rem; }
#publication-error { color: #8a3329; }
#publication-draft-status { padding:.8rem; background:#f5f0e3; border-radius:.7rem; overflow-wrap:anywhere; }
#review-publications .button { min-height:44px; max-width:100%; white-space:normal; }
#publication-url { font-size:16px; min-width:0; max-width:100%; }
.publication-live { padding:14px; margin:18px 0; background:#edf2e9; border:1px solid var(--line); border-radius:8px; overflow-wrap:anywhere; }
.publication-live h3 { margin-top:0; } #publication-live-error { color:#8a3329; }

/* An isolated public example: the customer's workspace remains in place. */
.example-view-open main > :not(#example-view):not(#navigation-error) { display:none; }
.example-view { max-width:1080px; margin:20px auto 48px; }
.example-view h2 { font:400 clamp(28px,4vw,38px)/1.2 Georgia,serif; margin:16px 0 12px; }
.example-modes { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.example-view .button { min-height:44px; max-width:100%; white-space:normal; }
.example-view .example-background { margin:16px 0; }
.example-sheet { display:grid; justify-items:start; gap:16px; }
.example-sheet > img { display:block; width:min(100%,595px); height:auto; background:white; box-shadow:0 3px 12px #20384b12; border:1px solid var(--line); }
.example-sheet-text { width:100%; max-width:700px; }
.example-create { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.example-create p,.example-play-note { font-size:14px; color:#596d63; line-height:1.6; }
#example-load-status:empty { display:none; }
.example-play #guest-storage-note { margin:12px 0; }
@media (max-width:760px) { .example-view-open .app-shell { padding:0 max(10px,env(safe-area-inset-left)) 0 max(10px,env(safe-area-inset-right)); } }
@media print { #example-view { display:none!important; } }

/* Route visibility is independent of whether a saved draft happens to exist. */
body[data-page="home"] main > :not(#home-intro):not(#home-example):not(#home-information):not(#home-resume):not(#draft-saving):not(#navigation-error):not(.footer) { display:none; }
body[data-page="workspace"] #home-information { display:none; }
.home-resume { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; margin:20px auto 0; max-width:1120px; border:1px solid #ced8c5; border-radius:12px; background:#f9faf3; }
.home-resume h2 { font-size:18px; margin:4px 0 0; overflow-wrap:anywhere; }
.home-resume .eyebrow { margin:0; }
.home-resume .button,.workspace-home .button { min-height:44px; white-space:normal; }
.workspace-home { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:18px 0; }
.sample-sheet { display:block; width:100%; padding:0; border:0; background:transparent; border-radius:5px; }
.example-sheet-preview { width:100%; }
.example-sheet .account-actions { margin:0; }
.example-create { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.example-create p { width:100%; margin:0; }
#navigation-error { color:#8a3329; padding:16px; background:#fff3e8; border-radius:10px; }
.guide-header { flex-wrap:wrap; }
.guide-brand { text-decoration:none; }
#guide-home { min-height:44px; padding:8px; font-size:12px; }
@media (max-width:760px) {
  .home-resume { flex-direction:column; align-items:stretch; padding:14px; gap:10px; }
  .home-resume .account-actions { margin:0; }
  .home-resume .button { font-size:14px; }
  .example-view { margin-top:12px; }
  .example-modes { margin:12px 0; }
}