body.fluffy-game { background:#f9fbf1; color:#305b68; }body.fluffy-game .site-header,body.fluffy-game > footer { display:none; }body.fluffy-game #app { width:min(1100px,calc(100% - 28px)); max-width:1100px; padding:0; margin:0 auto; }
.dt-shell { min-height:100dvh; padding:8px 0 18px; }.dt-shell * { box-sizing:border-box; letter-spacing:0; }.dt-shell h1,.dt-shell h2,.dt-shell h3,.dt-shell p { margin-top:0; }.dt-shell h2:focus { outline:none; }.dt-shell button,.dt-shell .button,.dt-shell summary { min-width:48px; min-height:48px; font:inherit; font-size:17px; line-height:1.3; border-radius:6px; }.dt-shell button { cursor:pointer; }.dt-shell button:disabled { cursor:default; }.dt-shell button:focus-visible,.dt-shell a:focus-visible,.dt-shell input:focus-visible,.dt-shell summary:focus-visible { outline:4px solid #a564a5; outline-offset:3px; }
.dt-shell .dt-primary { padding:11px 18px; color:white; background:#318e92; border:2px solid #2b6f78; box-shadow:0 3px 0 #2a606e; font-size:18px; font-weight:750; }.dt-shell .dt-primary:hover { background:#287b80; }.dt-shell .dt-secondary { color:#466778; background:#fffdf3; border:2px solid #b9cfca; padding:9px 14px; font-size:16px; }
.dt-toolbar { display:grid; grid-template-columns:auto 1fr auto 48px auto; gap:10px; align-items:center; min-height:66px; padding-bottom:8px; }.dt-toolbar h1 { font-family:inherit; font-size:18px; line-height:1.25; margin:0 0 4px; }.dt-toolbar span { font-size:13px; }.dt-toolbar .dt-back { color:#79384b; font-size:14px; padding:8px; white-space:nowrap; }.dt-toolbar .dt-sound { width:48px; padding:0; }.dt-motion { display:flex; align-items:center; gap:5px; font-size:13px; }.dt-motion input { width:22px; height:22px; accent-color:#318e92; }
.dt-cover { text-align:center; }.dt-cover > span { display:block; color:#a46a42; font-size:15px; font-weight:700; margin:12px 0 8px; }.dt-cover h2 { font-size:33px; color:#2b8189; margin:0 0 12px; }.dt-cover p { font-size:19px; line-height:1.45; max-width:790px; margin:0 auto 17px; }.dt-cover-image { width:100%; height:auto; display:block; }.dt-cover > .dt-cover-image { max-height:440px; object-fit:contain; margin:20px auto 12px; }.card-art .dt-cover-image { width:100%; height:100%; object-fit:contain; background:#fbefd4; }.dt-cover .dt-cover-note { font-size:15px; }
.dt-case-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:4px 0; }.dt-case-heading > span { color:#a16b42; font-size:16px; font-weight:700; }.dt-case-heading h2 { font-family:inherit; font-size:23px; line-height:1.25; margin:0; }.dt-instruction { font-family:inherit; font-size:20px; line-height:1.3; margin:7px 0 9px; min-height:26px; }.dt-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:stretch; }
.dt-case-card { min-width:0; padding:10px 18px; background:#fffef6; border:2px solid #d7d5ba; border-radius:6px; }.dt-equation-grid { display:grid; grid-template-columns:1fr 32px 1fr 32px 1fr; gap:4px; min-height:148px; }.dt-term { position:relative; text-align:center; min-width:0; }.dt-number { display:flex; align-items:center; justify-content:center; margin:0 auto; height:60px; min-width:60px; width:80px; color:#356674; font-size:37px; font-weight:800; line-height:1.1; }.dt-hole { border:3px solid #d7b860; background:#fff3bf; border-radius:6px; width:67px; }.dt-math-sign { font-size:31px; font-weight:700; line-height:60px; text-align:center; }.dt-shell .dt-loupe { position:absolute; top:59px; left:calc(50% - 24px); padding:0; background:#fffaf0; border:1px solid #d6c59b; width:48px; height:48px; border-radius:50%; }.dt-loupe svg { display:block; height:42px; width:42px; margin:auto; }.dt-role { display:block; min-height:36px; margin-top:49px; font-size:13px; font-weight:700; line-height:1.3; color:#6b827c; }.dt-highlight-known .dt-number { background:#e4f2d7; outline:3px solid #b7c990; border-radius:5px; }
.dt-calculation { height:45px; display:flex; justify-content:center; align-items:center; margin:3px 0 0; font-size:18px; font-weight:700; color:#9eafab; border-top:1px dashed #d0dccd; }.dt-calculation-ready { font-size:29px; color:#39858b; }.dt-key-row { display:flex; align-items:center; justify-content:center; gap:30px; min-height:95px; }.dt-case-cat { width:94px; height:95px; }.dt-cat { height:100%; width:100%; display:block; }.dt-numeric-key { position:relative; width:215px; height:100px; }.dt-key-art { display:block; height:100%; width:100%; }.dt-numeric-key > strong { position:absolute; left:35.2%; top:13%; width:33.3%; height:48%; display:grid; place-items:center; font-size:28px; line-height:1; color:#7c683b; }.phase-key .dt-numeric-key { animation:dt-key-turn .65s ease-in-out both; }
.dt-evidence { position:relative; padding:7px 9px; background:#edf3e5; border:2px solid #c1d0b8; border-radius:6px; isolation:isolate; }.dt-cabinet-caption { display:block; text-align:center; font-size:12px; color:#8d7859; font-weight:700; margin-bottom:5px; }.dt-cabinet { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:7px; border:5px solid #b39367; border-radius:5px; background:#d6bb8c; height:153px; }.dt-drawer { position:relative; min-width:0; border:1px solid #a68b69; background:#6e8c85; border-radius:3px; isolation:isolate; }.dt-drawer-inside { position:absolute; inset:2px; z-index:0; }.dt-drawer-face { position:absolute; inset:0; background:#e9ce9d; border:2px solid #c1a170; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:3px; z-index:1; transform-origin:center bottom; }.dt-drawer-face > span { font-size:10px; font-weight:700; color:#796446; white-space:nowrap; }.dt-drawer-face i { width:12px; height:12px; border:2px solid #c0a05d; border-radius:50%; background:#a78c57; position:relative; }.dt-drawer-face i::after { content:''; width:4px; height:6px; position:absolute; top:5px; left:2px; background:#a78c57; }.dt-drawer-current { outline:3px solid #f0ce6c; outline-offset:1px; }.phase-open .dt-drawer-current .dt-drawer-face,.phase-piece .dt-drawer-current .dt-drawer-face { animation:dt-drawer-open .85s ease-out both; }.dt-drawer-solved .dt-drawer-face { top:auto; height:45%; border-width:1px; }.dt-drawer-solved .dt-drawer-face i { display:none; }.dt-drawer-solved .dt-drawer-face > span { font-size:10px; }.dt-training-cabinet { grid-template-columns:1fr; width:140px; margin:0 auto; }.dt-training-cabinet .dt-drawer-face > span { font-size:15px; }.dt-training-prize { color:#f7dc70; font-size:32px; display:grid; place-items:center; }
.dt-evidence-photo { width:168px; margin:7px auto 0; text-align:center; }.dt-photo { width:100%; aspect-ratio:3/2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); border:3px solid #b6c9bd; background:#f4f5e5; gap:1px; border-radius:4px; }.dt-photo-tile { display:grid; place-items:center; background:#e4e9d6; color:#a8b395; border:1px dashed #c6cfb3; min-width:0; min-height:0; }.dt-photo-tile b { font-size:12px; font-weight:500; }.dt-photo-fragment,.dt-photo .dt-revealed { background-image:url('assets/fluffy-photo.png'); background-size:300% 300%; background-position:var(--tile-x) var(--tile-y); background-repeat:no-repeat; }.dt-photo .dt-revealed { border:0; }.dt-evidence-photo > span { font-size:11px; color:#778e7c; line-height:1.4; display:block; margin-top:3px; }.dt-flying-piece { position:absolute; top:55px; left:calc(50% - 30px); width:60px; height:40px; border:3px solid #f8df91; border-radius:3px; z-index:4; animation:dt-photo-transfer .85s ease-in-out both; pointer-events:none; }
.dt-feedback { min-height:76px; margin:9px 0; padding:8px 12px; display:flex; flex-direction:column; justify-content:center; font-size:18px; line-height:1.4; background:#fffdf4; border:1px solid #d1d9c4; border-left:5px solid #e9c367; border-radius:5px; }.dt-feedback strong { font-size:14px; color:#996c99; }.dt-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; }.dt-op-choices { display:flex; gap:12px; }.dt-shell .dt-op { min-width:165px; padding:9px 15px; border:2px solid #adcaca; color:#3c7180; background:#fffdf5; font-size:18px; font-weight:700; }.dt-op b { font-size:25px; margin-right:5px; vertical-align:middle; }.dt-answer-form { display:flex; align-items:center; gap:10px; }.dt-answer-form label { font-size:18px; font-weight:700; }.dt-answer-form input { width:84px; height:56px; font-size:30px; font-weight:750; text-align:center; color:#346674; border:2px solid #8db8b8; border-radius:5px; background:white; }.dt-answer-form button { font-size:17px!important; }.dt-help-actions { display:flex; gap:8px; flex-wrap:wrap; max-width:315px; justify-content:flex-end; }.dt-help-actions button { font-size:15px!important; }.dt-wait { min-height:56px; display:flex; align-items:center; font-size:18px; font-weight:700; color:#6b9878; }
.dt-folders { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.dt-folders li { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 9px; border-bottom:3px solid #cedbd0; color:#8ca39b; background:#f1f7ec; border-radius:3px; }.dt-folders strong { font-size:12px; line-height:1.3; }.dt-folders span { font-size:13px; }.dt-folders .dt-folder-current { color:#587c83; border-color:#dfb65f; background:#fff4cd; }
.dt-finish { text-align:center; }.dt-finish h2 { font-size:30px; color:#2b8189; margin:12px 0; }.dt-finish > p { font-size:19px; line-height:1.45; max-width:850px; margin:0 auto 14px; }.dt-finish-photo { position:relative; width:min(660px,100%); margin:0 auto; }.dt-finish-photo .dt-photo { border:7px solid #ead9b3; gap:0; box-shadow:0 3px 0 #b9aa85; }.dt-finish-cat { position:absolute; left:-125px; bottom:0; width:140px; height:180px; }.dt-large-photo { width:min(900px,100%); }.dt-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }.dt-stats > div { display:flex; gap:12px; align-items:center; background:#fffdf3; border:1px solid #c1d4ce; border-radius:6px; padding:12px; text-align:left; }.dt-stats strong { font-size:33px; color:#3b8c8d; }.dt-stats span { font-size:15px; line-height:1.4; }.dt-finish-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:17px 0; }.dt-finish details { max-width:850px; margin:14px auto; font-size:18px; line-height:1.5; text-align:left; }.dt-finish summary { padding:10px; cursor:pointer; }.dt-finish details p { padding:0 10px; }
.dt-help { width:min(610px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; border:2px solid #a4c5bb; border-radius:8px; padding:24px; background:#fffdf3; color:#305b68; font-size:18px; line-height:1.5; }.dt-help h2 { font-size:25px; }.dt-help::backdrop { background:#28536699; }
@keyframes dt-key-turn { 40% { transform:translateX(25px) rotate(-12deg); }to { transform:translateX(0) rotate(0); } }@keyframes dt-drawer-open { to { transform:scaleY(.48); } }@keyframes dt-photo-transfer { from { transform:translateY(0) scale(.8); opacity:1; }to { transform:translateY(145px) scale(.7); opacity:0; } }.dt-paused * { animation:none!important; transition:none!important; }
@media (min-width:901px) and (max-height:760px) { .dt-shell { padding-top:4px; }.dt-toolbar { min-height:60px; }.dt-case-card { padding:7px 16px; }.dt-equation-grid { min-height:141px; }.dt-calculation { height:41px; }.dt-key-row { min-height:88px; }.dt-case-cat { height:88px; }.dt-evidence { padding:5px 8px; }.dt-cabinet { height:143px; }.dt-evidence-photo { width:156px; }.dt-feedback { min-height:70px; margin:8px 0; }.dt-folders { margin-top:10px; } }
@media (max-width:1000px) { .dt-toolbar { grid-template-columns:auto 1fr auto 48px; }.dt-motion { grid-column:1/-1; justify-self:end; }.dt-layout { grid-template-columns:minmax(0,1fr) 245px; gap:10px; }.dt-number { width:62px; font-size:34px; }.dt-hole { width:62px; }.dt-role { font-size:12px; }.dt-case-card { padding:10px 12px; }.dt-key-row { gap:10px; }.dt-numeric-key { width:190px; }.dt-cabinet { padding:5px; gap:4px; }.dt-drawer-face > span { font-size:9px; }.dt-answer-form { flex-wrap:wrap; }.dt-answer-form button { flex-basis:100%; }.dt-help-actions { max-width:210px; }.dt-controls { align-items:start; }.dt-finish-cat { left:0; bottom:0; width:100px; height:130px; transform:translateX(-30%); } }
@media (max-width:760px) { .dt-layout { grid-template-columns:1fr; }.dt-evidence { display:grid; grid-template-columns:1fr 155px; gap:5px 12px; align-items:center; }.dt-cabinet-caption { grid-column:1; margin:0; }.dt-cabinet { grid-column:1; height:148px; }.dt-evidence-photo { grid-column:2; grid-row:1/3; width:150px; margin:0; }.dt-training-cabinet { width:140px; }.dt-feedback { min-height:108px; }.dt-flying-piece { left:25%; }.dt-finish-cat { display:none; } }
@media (max-width:600px) { body.fluffy-game #app { width:calc(100% - 14px); }.dt-toolbar { grid-template-columns:1fr auto 48px; gap:7px; }.dt-toolbar > div { grid-column:1/-1; grid-row:1; }.dt-toolbar .dt-back { grid-row:2; }.dt-toolbar [data-dt-action="help"] { grid-column:2; grid-row:2; }.dt-toolbar .dt-sound { grid-column:3; grid-row:2; }.dt-motion { grid-column:1/-1; justify-self:start; margin:2px 0 5px; }.dt-toolbar h1 { font-size:18px; }.dt-case-heading { flex-direction:column; align-items:start; gap:5px; }.dt-case-heading h2 { font-size:23px; }.dt-case-heading > span { font-size:14px; }.dt-instruction { font-size:18px; min-height:47px; }.dt-case-card { padding:10px 7px; }.dt-equation-grid { grid-template-columns:1fr 20px 1fr 20px 1fr; gap:2px; min-height:163px; }.dt-number { width:58px; font-size:31px; height:57px; }.dt-hole { width:58px; min-width:58px; }.dt-math-sign { font-size:25px; line-height:57px; }.dt-role { font-size:11px; line-height:1.25; margin-top:53px; min-height:42px; }.dt-key-row { min-height:105px; gap:5px; }.dt-case-cat { width:85px; height:99px; }.dt-numeric-key { width:170px; height:90px; }.dt-numeric-key > strong { font-size:24px; }.dt-calculation-ready { font-size:27px; }.dt-evidence { grid-template-columns:1fr; padding:7px; gap:6px; }.dt-cabinet-caption { grid-column:1; }.dt-cabinet { width:100%; height:166px; grid-column:1; }.dt-evidence-photo { grid-column:1; grid-row:auto; width:170px; margin:1px auto 0; }.dt-drawer-face > span { font-size:10px; }.dt-training-cabinet { width:150px; }.dt-feedback { min-height:134px; font-size:17px; }.dt-controls { flex-direction:column; gap:12px; }.dt-controls > .dt-primary { width:100%; }.dt-op-choices { width:100%; gap:8px; }.dt-shell .dt-op { width:50%; min-width:0; font-size:16px; padding:9px 6px; }.dt-help-actions { max-width:100%; justify-content:start; }.dt-answer-form { width:100%; gap:8px; }.dt-answer-form label { font-size:17px; }.dt-answer-form input { width:76px; }.dt-answer-form button { width:100%; flex-basis:100%; }.dt-folders { gap:5px; }.dt-folders li { flex-direction:column; justify-content:start; text-align:center; padding:6px 4px; }.dt-folders strong { font-size:11px; }.dt-folders span { font-size:12px; }.dt-cover h2 { font-size:28px; }.dt-cover p { font-size:17px; }.dt-cover .dt-cover-note { font-size:14px; }.dt-finish h2 { font-size:27px; }.dt-finish > p { font-size:17px; }.dt-stats { grid-template-columns:1fr; gap:7px; }.dt-finish-actions { flex-direction:column; }.dt-finish-actions > * { width:100%; }.dt-finish details { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .dt-shell * { animation:none!important; transition:none!important; } }
.dt-large-photo .dt-finish-cat { left:0; transform:none; }
.dt-photo-full { background-image:url('assets/fluffy-photo.png'); background-size:100% 100%; background-repeat:no-repeat; }
.dt-photo-full .dt-revealed { background:transparent; }
.dt-lock-key { position:absolute; width:65px; height:32px; top:calc(50% - 4px); right:50%; z-index:3; pointer-events:none; animation:dt-key-insert .85s ease-in-out both; }
@keyframes dt-key-insert { from { transform:translateX(-38px); opacity:0; } 35% { transform:translateX(7px); opacity:1; } 65% { transform:translateX(7px) rotate(-15deg); opacity:1; } to { transform:translateX(7px) rotate(0); opacity:0; } }
@media (max-width:760px) { .dt-finish-cat { display:block; position:static; width:90px; height:105px; margin:4px auto; transform:none; } }
@media (max-width:600px) {
  .dt-play { display:flex; flex-direction:column; }
  .dt-case-heading { order:0; }.dt-instruction { order:1; }
  .dt-layout { display:contents; }.dt-case-card { order:2; }
  .dt-feedback { order:3; min-height:96px; }.dt-controls { order:4; }
  .dt-evidence { order:5; margin-top:14px; }.dt-folders { order:6; }
  .dt-equation-grid { min-height:150px; }.dt-key-row { min-height:88px; }
  .dt-case-cat { height:88px; }
}