.tutorialPage{--tut-latte:#fff8e7;--tut-espresso:#2a1f17;--tut-muted:#7a6758;--tut-accent:#a47b5b;min-height:100dvh;display:flex;flex-direction:column;background:var(--tut-latte);color:var(--tut-espresso);font-family:var(--font-sans),system-ui,-apple-system,"Segoe UI",sans-serif}.tutorialPage:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;mix-blend-mode:multiply}.tutorialHeader{position:relative;z-index:2;width:100%}.tutorialHeaderInner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 28px;max-width:1200px;margin:0 auto;padding:max(20px,env(safe-area-inset-top,0px)) 32px 10px}.tutorialHeaderBrand{flex-shrink:0;gap:10px}.tutorialHeaderBrand .landing-topNavMark{color:var(--tut-espresso);font-family:inherit;font-size:1.2rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}.tutorialHeaderBrand .landing-topNavLogoImg{height:34px;width:34px;max-width:34px}.tutorialHeaderMeta{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.tutorialHeaderEyebrow{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tut-accent)}.tutorialHeaderProgress{margin:0;font-size:.88rem;font-weight:500;letter-spacing:-.01em;color:rgba(42,31,23,.58)}.tutorialStepDots{display:flex;align-items:center;justify-content:center;gap:7px;padding:0 32px 14px}.tutorialStepDot{width:7px;height:7px;border-radius:999px;background:rgba(42,31,23,.14);transition:transform .25s ease,background .25s ease,width .25s ease}.tutorialStepDot--done{background:rgba(164,123,91,.55)}.tutorialStepDot--active{width:22px;background:var(--tut-accent)}.tutorialContinueWrap{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1rem 1.5rem max(1.35rem,env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,rgba(255,248,231,.98) 0,rgba(255,248,231,.94) 55%,rgba(255,248,231,0));pointer-events:none}.tutorialContinueHint{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:rgba(42,31,23,.62);pointer-events:none}.tutorialContinueBtn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-width:min(100%,18rem);padding:.95rem 1.65rem;border:none;border-radius:14px;font-family:inherit;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:#fff;cursor:pointer;background:var(--tut-espresso);box-shadow:0 10px 28px rgba(42,31,23,.28),0 0 0 1px rgba(42,31,23,.08);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;pointer-events:auto;animation:tutorialContinuePulse 2.4s ease-in-out infinite}.tutorialContinueBtn--install{background:var(--fillr-gradient-download);border:.5px solid rgba(255,255,255,.35);text-shadow:0 1px 3px rgba(0,40,24,.45);box-shadow:var(--fillr-download-glow);animation-name:tutorialContinueInstallPulse}.tutorialContinueBtn:hover{transform:translateY(-2px);filter:brightness(1.06)}.tutorialContinueBtn--install:hover{box-shadow:var(--fillr-download-glow-hover)}.tutorialContinueBtn:active{transform:translateY(0) scale(.985)}.tutorialContinueChromeIcon{width:18px;height:18px;flex:0 0 18px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;filter:drop-shadow(0 1px 0 rgba(0,0,0,.12))}@keyframes tutorialContinuePulse{0%,to{box-shadow:0 10px 28px rgba(42,31,23,.28),0 0 0 0 rgba(42,31,23,0)}50%{box-shadow:0 14px 34px rgba(42,31,23,.36),0 0 0 4px rgba(42,31,23,.1)}}@keyframes tutorialContinueInstallPulse{0%,to{box-shadow:var(--fillr-download-glow)}50%{box-shadow:var(--fillr-download-glow-hover),0 0 0 4px rgba(34,160,107,.14)}}.tutorialMain{position:relative;z-index:1;flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(.5rem,2vw,1.25rem) clamp(1rem,3vw,1.5rem) clamp(7rem,14vw,8.5rem)}.tutorialLeadEyebrow{margin:0 0 .45rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(164,123,91,.85);text-align:center}.tutorialLead{margin:0 0 clamp(1rem,2.5vw,1.35rem);max-width:34rem;text-align:center;font-size:clamp(1.05rem,2.4vw,1.28rem);font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--tut-espresso);text-wrap:balance}.tutorialPage .hiwOrg-organizeBtn--demoTarget{animation:hiwOrgOrganizeMetal 5s ease-in-out infinite,tutorialOrganizeTargetPulse 2.2s ease-in-out infinite}.tutorialPage .hiwOrg-organizeBtn--pressed{transform:scale(.94);filter:brightness(.9);animation:none;box-shadow:inset 0 2px 6px rgba(0,0,0,.22),0 0 0 2px rgba(164,123,91,.45)}@keyframes tutorialOrganizeTargetPulse{0%,to{box-shadow:0 0 0 0 rgba(164,123,91,0),0 8px 22px rgba(143,90,50,.35)}50%{box-shadow:0 0 0 5px rgba(164,123,91,.22),0 12px 28px rgba(143,90,50,.42)}}.tutorialStage{width:100%;max-width:min(920px,96vw);filter:drop-shadow(0 24px 48px rgba(42,31,23,.08))}.tutorialStage--paused .tutorialMock *{animation-play-state:paused!important}.tutorialTabStrip{display:flex;align-items:flex-end;flex-wrap:nowrap;gap:4px;padding:8px 0 6px;overflow:hidden;min-height:38px;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}.tutorialTab{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;max-width:96px;height:26px;padding:0 7px 0 5px;border-radius:7px 7px 0 0;background:#2a2420;border:1px solid rgba(58,49,42,.9);border-bottom:none;font-size:10px;color:rgba(255,255,255,.82)}.tutorialTab--exiting{pointer-events:none}.tutorialTabFav{display:grid;place-items:center;width:11px;height:11px;flex-shrink:0;border-radius:2px;overflow:hidden}.tutorialTabFav img{width:11px;height:11px;object-fit:contain;display:block}.tutorialTabFavFallback{width:11px;height:11px;border-radius:2px}.tutorialTabName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.tutorialWorkspaceChip{flex:0 0 auto;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px 7px 0 0;font-size:10px;font-weight:700;letter-spacing:-.02em;color:#fff;background:color-mix(in srgb,var(--ws-color,#c58b54) 72%,#1a1410);border:1px solid color-mix(in srgb,var(--ws-color,#c58b54) 55%,transparent);border-bottom:none;box-shadow:0 -2px 12px color-mix(in srgb,var(--ws-color,#c58b54) 25%,transparent)}.tutorialTabCountBadge{position:absolute;top:10px;right:12px;z-index:3;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.9);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.tutorialBrowserTop{position:relative}.tutorialPanelContent{padding:10px 12px 12px;border-bottom:1px solid rgba(255,255,255,.08);background:#1c1410}.tutorialComposer{margin-top:0}.tutorialSavePanelTitle{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45)}.tutorialSaveFieldLabel{display:block;margin-bottom:6px;font-size:11px;font-weight:600;color:rgba(255,255,255,.55)}.tutorialSaveInput{width:100%;box-sizing:border-box;margin-bottom:12px;padding:9px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:13px;font-weight:600;letter-spacing:-.02em}.tutorialCoverRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px;gap:8px;margin-bottom:12px}.tutorialCoverThumb{position:relative;aspect-ratio:4/3;border-radius:10px;border:2px solid transparent;background-size:cover;background-position:50%;cursor:default;overflow:hidden;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}.tutorialCoverThumb--selected{border-color:#c58b54;box-shadow:0 0 0 2px rgba(197,139,84,.35);transform:scale(1.03)}.tutorialCoverMood{position:absolute;inset:auto 0 0;padding:5px 6px;font-size:9px;font-weight:700;letter-spacing:.02em;text-align:center;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72))}.tutorialSaveBtnWrap{position:relative;display:flex;flex-direction:column;align-items:center}.tutorialSaveBtn{width:100%;padding:10px 14px;border:none;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:-.02em;color:#fff;background:linear-gradient(125deg,#8f5a32,#c58b54,#d4a06a);box-shadow:0 0 22px rgba(197,139,84,.35),inset 0 1px 0 rgba(255,255,255,.28);cursor:default}.tutorialSaveBtn--pulse{animation:tutorialSavePulse 1.8s ease-in-out infinite}@keyframes tutorialSavePulse{0%,to{transform:scale(1);box-shadow:0 0 22px rgba(197,139,84,.35),inset 0 1px 0 rgba(255,255,255,.28)}50%{transform:scale(1.04);box-shadow:0 0 32px rgba(197,139,84,.55),inset 0 1px 0 rgba(255,255,255,.35)}}.tutorialPressTarget{position:relative}.tutorialPointArrow{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:8;animation:tutorialPointIn .45s cubic-bezier(.32,.72,0,1) both,tutorialPointBounce 1.4s ease-in-out .45s infinite}.tutorialPointArrow--up{top:auto;bottom:calc(100% + 8px);flex-direction:column-reverse;animation:tutorialPointInUp .45s cubic-bezier(.32,.72,0,1) both,tutorialPointBounceUp 1.4s ease-in-out .45s infinite}.hiwOrg-pillWrap .tutorialPointArrow{top:calc(100% + 6px)}.tutorialPointArrowTip{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid var(--tut-accent);filter:drop-shadow(0 2px 6px rgba(164,123,91,.35))}.tutorialPointArrow--up .tutorialPointArrowTip{border-bottom:none;border-top:9px solid var(--tut-accent)}.tutorialPointArrowLabel{display:inline-block;padding:4px 11px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:lowercase;line-height:1.2;white-space:nowrap;color:var(--tut-espresso);background:rgba(255,252,245,.96);border:1px solid rgba(164,123,91,.28);box-shadow:0 6px 18px rgba(42,31,23,.1)}@keyframes tutorialPointIn{0%{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes tutorialPointInUp{0%{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes tutorialPointBounce{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}@keyframes tutorialPointBounceUp{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}.tutorialInstallInline{margin-top:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);text-align:center;animation:tutorialInstallIn .5s cubic-bezier(.22,1,.36,1) both}@keyframes tutorialInstallIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tutorialSavedPreview{position:relative;margin-bottom:12px;aspect-ratio:16/7;border-radius:12px;background-size:cover;background-position:50%;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.35)}.tutorialSavedPreview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.72))}.tutorialSavedPreviewMeta,.tutorialSavedPreviewName{position:absolute;left:10px;right:10px;z-index:1;text-align:left;color:#fff}.tutorialSavedPreviewName{bottom:22px;font-size:13px;font-weight:700;letter-spacing:-.02em}.tutorialSavedPreviewMeta{bottom:8px;font-size:10px;font-weight:600;color:rgba(255,255,255,.78)}.tutorialInstallCtaWrap{position:relative;display:flex;flex-direction:column;align-items:center}.tutorialInstallBtn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem 1rem;border-radius:999px;border:none;font-size:.92rem;font-weight:700;letter-spacing:-.02em;text-decoration:none;color:#fff;background:linear-gradient(125deg,#8f5a32,#c58b54,#d4a06a);box-shadow:0 10px 28px rgba(197,139,84,.35)}.tutorialInstallBtn--inline{animation:tutorialInstallPulse 2s ease-in-out infinite}.tutorialInstallBtn:hover{text-decoration:none;transform:translateY(-1px)}.tutorialInstallBtnIcon{width:20px;height:20px;border-radius:4px;object-fit:cover}@keyframes tutorialInstallPulse{0%,to{box-shadow:0 12px 32px rgba(197,139,84,.35)}50%{box-shadow:0 16px 40px rgba(197,139,84,.5),0 0 0 4px rgba(197,139,84,.15)}}.tutorialInstallHint{margin:.65rem 0 0;font-size:.72rem;font-weight:500;color:rgba(255,255,255,.45)}.tutorialBtnLabel--short{display:none}@media (max-width:640px){.tutorialTab{max-width:72px}.tutorialCoverRow{gap:6px}.tutorialContinueBtn{animation:none}.tutorialBtnLabel--full{display:none}.tutorialBtnLabel--short{display:inline}.tutorialPage .tutorialStage.hiwMock .hiwMock-dock{width:calc(100% - 1rem);bottom:.4rem}.tutorialPage .tutorialStage.hiwMock .hiwOrg-shell--panelOpen{width:min(78vw,252px);border-radius:12px;transform:scale(.88);transform-origin:bottom center}.tutorialPage .tutorialStage.hiwMock .hiwOrg-panelAbove--open{max-height:172px}.tutorialPanelContent{padding:6px 8px 7px}.tutorialSavePanelTitle{margin:0 0 5px;font-size:8px;letter-spacing:.05em}.tutorialSaveFieldLabel{margin-bottom:3px;font-size:8px}.tutorialSaveInput{margin-bottom:6px;padding:5px 7px;border-radius:7px;font-size:10px}.tutorialCoverRow{gap:4px;margin-bottom:6px}.tutorialCoverThumb{aspect-ratio:auto;height:40px;border-radius:6px;border-width:1.5px}.tutorialCoverThumb--selected{transform:scale(1.02)}.tutorialCoverMood{padding:2px 3px;font-size:6px;letter-spacing:0}.tutorialSaveBtn{padding:6px 10px;font-size:10px}.tutorialSaveBtn--pulse{animation-name:tutorialSavePulseMobile}.tutorialPage .tutorialStage.hiwMock .hiwOrg-controlBar{gap:3px;padding:5px 7px}.tutorialPage .tutorialStage.hiwMock .hiwOrg-logo{height:15px;max-width:52px}.tutorialPage .tutorialStage.hiwMock .hiwOrg-controlBarCenter{gap:4px}.tutorialPage .tutorialStage.hiwMock .hiwOrg-organizeBtn--bar{padding:4px 7px;font-size:9px;gap:3px;white-space:nowrap}.tutorialPage .tutorialStage.hiwMock .hiwOrg-organizeBtn--hero{animation:hiwOrgOrganizeMetal 5s ease-in-out infinite}.tutorialPage .tutorialStage.hiwMock .hiwOrg-organizeBtnIcon{width:10px;height:10px}.tutorialPage .tutorialStage.hiwMock .hiwOrg-iconBtn{width:20px;height:20px;font-size:12px}.tutorialPage .tutorialStage.hiwMock .hiwMock-viewport{min-height:clamp(210px,48vw,250px)}.tutorialPage .tutorialStage.hiwMock .hiwMock-pageContent{padding-bottom:4.5rem}}@keyframes tutorialSavePulseMobile{0%,to{transform:scale(1);box-shadow:0 0 16px rgba(197,139,84,.3),inset 0 1px 0 rgba(255,255,255,.28)}50%{transform:scale(1.02);box-shadow:0 0 22px rgba(197,139,84,.45),inset 0 1px 0 rgba(255,255,255,.35)}}@media (max-width:400px){.tutorialPage .tutorialStage.hiwMock .hiwOrg-shell--panelOpen{width:min(74vw,228px);transform:scale(.82)}.tutorialPage .tutorialStage.hiwMock .hiwOrg-panelAbove--open{max-height:158px}.tutorialSaveBtn{padding:5px 8px;font-size:9px}.tutorialPage .tutorialStage.hiwMock .hiwOrg-organizeBtn--bar{padding:3px 6px;font-size:8px}}