@font-face{font-family:'Architects Daughter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/architectsdaughter.woff2') format('woff2')}.breadcrumb{font-family:var(--font-ui);font-size:13px;color:var(--ink-muted);margin-bottom:var(--space-sm)}.breadcrumb a{color:var(--color-ristikot);font-weight:600}.breadcrumb-sep{margin:0 6px;color:var(--grid-line)}.ristikko-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md);margin-top:var(--space-md)}.ristikko-card{display:block;background:var(--card-bg);border:2px solid var(--grid-line);overflow:hidden}.ristikko-card:hover{border-color:var(--ink);text-decoration:none}.ristikko-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-dark)}.ristikko-progress{position:absolute;bottom:0;left:0;z-index:1;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.03em;padding:4px 10px;background:var(--ink);color:var(--paper)}.ristikko-progress.solved{background:var(--color-ristikot);color:#fff}.ristikko-thumb img{width:100%;height:100%;object-fit:cover;object-position:left top}.ristikko-info{padding:var(--space-md);display:flex;justify-content:space-between;align-items:center}.ristikko-name{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink)}.ristikko-difficulty{font-family:var(--font-body);font-size:14px;color:var(--color-ristikot);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.ristikko-container{margin:var(--space-lg) 0}.ristikko-canvas-wrapper{display:flex;justify-content:center;margin:var(--space-md) calc(var(--space-xl) * -1);overflow-x:auto}@media (max-width:900px){.ristikko-canvas-wrapper{margin-left:calc(var(--space-lg) * -1);margin-right:calc(var(--space-lg) * -1)}}@media (max-width:700px){.ristikko-canvas-wrapper{margin-left:calc(var(--space-md) * -1);margin-right:calc(var(--space-md) * -1)}}.ristikko-canvas-wrapper canvas{display:block;background:var(--paper-dark);border-radius:4px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ristikko-controls{display:flex;justify-content:space-between;align-items:center;margin:var(--space-md) 0}.ristikko-controls-left,.ristikko-controls-right{display:flex;gap:var(--space-xs)}.ristikko-timer{font-family:'DM Sans',sans-serif;font-size:14px;color:var(--ink-muted);letter-spacing:.05em}.howto-mobile{display:none}@media (hover:none) and (pointer:coarse),(max-width:768px){.ristikko-controls-left{display:none}.howto-desktop{display:none}.howto-mobile{display:block}.ristikko-controls{justify-content:flex-end}.ristikko-timer{margin-right:auto}}.btn-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;background:var(--color-ristikot);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.btn-icon:hover{background:var(--color-ristikot-hover)}.btn-danger{background:var(--ink-muted)}.btn-danger:hover{background:var(--ink)}.vkeyboard{position:fixed;bottom:0;left:0;right:0;width:100%;padding:var(--space-xs) var(--space-xs) calc(var(--space-xs) + max(4px,env(safe-area-inset-bottom,4px)));background:var(--paper-dark);will-change:transform,top,left,width;transition:none;border-top:1px solid var(--grid-line);z-index:100;box-sizing:border-box}.vkeyboard-row{display:flex;justify-content:center;gap:3px;margin-bottom:3px}.vkey{min-width:0;height:38px;padding:0;font-size:15px;font-weight:600;font-family:var(--font-ui);background:var(--card-bg);color:var(--ink);border:1px solid var(--grid-line);border-radius:5px;cursor:pointer;transition:all .1s ease;flex:1;max-width:calc((100% - 30px)/ 11)}.vkey:active{background:var(--ink);color:var(--paper)}.vkey-bksp{flex:1.5;max-width:calc((100% - 30px)/ 11 * 1.5)}.vkeyboard-row:last-of-type{padding-left:calc((100% - 30px)/ 11 / 2 + 3px)}@media (hover:hover) and (pointer:fine){.vkeyboard{display:none}}.ristikko-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .3s ease}.ristikko-modal.active{opacity:1;visibility:visible}.ristikko-modal-content{position:relative;background:var(--card-bg);border:3px solid var(--ink);padding:var(--space-xl) var(--space-2xl);text-align:center;max-width:400px;transform:scale(.8) translateY(20px);transition:transform .3s cubic-bezier(.34, 1.56, .64, 1);box-shadow:0 8px 32px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.15)}.ristikko-modal.active .ristikko-modal-content{transform:scale(1) translateY(0)}.ristikko-modal-icon{font-size:64px;line-height:1;margin-bottom:var(--space-md)}.ristikko-modal-icon.success{color:var(--color-ristikot);animation:ristikko-pulse .6s ease}.ristikko-modal-icon.error{color:var(--ink-muted)}@keyframes ristikko-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}.ristikko-modal-content h2{font-family:var(--font-display);font-size:28px;margin-bottom:var(--space-sm)}.ristikko-modal-content p{font-size:16px;color:var(--ink-light);margin-bottom:var(--space-lg)}.ristikko-modal-close{position:absolute;top:12px;right:12px;width:40px;height:40px;padding:0;border:none;background:0 0;font-size:32px;line-height:1;color:var(--ink-light);cursor:pointer;transition:color .2s ease,transform .2s ease}.ristikko-modal-close:hover{color:var(--ink);transform:scale(1.15)}.ristikko-modal-content .btn-primary{background:var(--color-ristikot)}.ristikko-modal-content .btn-primary:hover{background:var(--color-ristikot-hover)}.ristikko-wrong-flash{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:var(--space-md) var(--space-xl);background:var(--color-error);color:#fff;font-family:var(--font-ui);font-size:18px;font-weight:600;border-radius:8px;z-index:1000;animation:flashIn .3s ease;box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 0 4px var(--color-error-glow);text-shadow:0 1px 2px rgba(0,0,0,.3)}.ristikko-wrong-flash.fade-out{opacity:0;transition:opacity .3s ease}@keyframes flashIn{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.howto-num{background:var(--color-ristikot)}.hero-sub{color:var(--ink)}.hero-with-difficulty{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-sm)}.hero-with-difficulty h2{margin:0}.difficulty-label{font-family:var(--font-body);font-size:18px;color:var(--color-ristikot);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.howto{position:relative;padding:var(--space-lg);background:var(--paper-dark);border-radius:var(--radius);margin-top:var(--space-md)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .howto{background:var(--paper)}}[data-theme=dark] .howto{background:var(--paper)}.howto h2{font-family:var(--font-display);font-size:24px;margin-bottom:var(--space-md);color:var(--ink)}.howto h3{font-family:var(--font-display);font-size:20px;margin:0 0 var(--space-md) 0;padding:0;color:var(--ink);background:0 0;text-transform:none;letter-spacing:normal}.howto h3::before{display:none}.howto .tips-list{margin:0;padding-left:var(--space-lg);color:var(--ink)}.howto .tips-list li{margin-bottom:var(--space-xs);line-height:1.6}.howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.howto-item{display:flex;gap:var(--space-sm);align-items:flex-start}.howto-num{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;font-size:14px}.howto-item b{display:block;margin-bottom:4px}.howto-item p{color:var(--ink-light);font-size:14px;margin:0}@media (max-width:700px){.howto-grid{grid-template-columns:1fr}.ristikko-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:500px){.ristikko-grid{grid-template-columns:1fr}}.ristikko-feedback{max-width:500px;margin:0 auto var(--space-xl);padding:var(--space-md);text-align:center}.ristikko-feedback p{font-family:var(--font-ui);font-size:14px;color:var(--ink-light);margin:0 0 var(--space-sm)}.ristikko-feedback form{display:flex;flex-direction:column;gap:var(--space-sm)}.ristikko-feedback textarea{font-family:var(--font-ui);font-size:14px;padding:var(--space-sm);border:1px solid var(--grid-line);border-radius:6px;background:var(--card-bg);color:var(--ink);resize:vertical}.ristikko-feedback button{align-self:center;font-family:var(--font-ui);font-size:14px;font-weight:600;padding:10px 24px;border:none;border-radius:6px;background:var(--color-ristikot);color:#fff;cursor:pointer}.ristikko-feedback button:hover{background:var(--color-ristikot-hover)}