:root { --paper:#f8f9f3; --ink:#293b31; --muted:#5c685f; --sage:#e4ede6; --green:#355442; --lime:#e7efbb; --lavender:#e7e4f3; --peach:#f5e1d0; --line:#dce1d7; --white:#fff; --radius:20px; --display:'Bricolage Grotesque','Trebuchet MS',sans-serif; --body:'DM Sans','Segoe UI',sans-serif}

* { box-sizing:border-box}
html { scroll-behavior:smooth; scroll-padding-top:106px}
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.55}
button,input { font:inherit}
button,a,input,summary { -webkit-tap-highlight-color:transparent}
button { color:inherit; cursor:pointer}
a { color:inherit; text-decoration:none}
button:disabled { cursor:not-allowed}
img,svg { max-width:100%}
img { display:block}
h1,h2,h3,p { margin:0}
h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.035em}
h1 { font-size:clamp(48px,5.2vw,76px)}
h2 { font-size:34px}
h3 { font-size:23px}
p { color:var(--muted)}
button { border:0}
a,button,summary { touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #6e46a1; outline-offset:5px}
h1:focus,section:focus,[tabindex="-1"]:focus { outline:none}
[hidden] { display:none!important}
.wrap { max-width:1280px; margin:auto; padding-inline:40px}
.icon { width:21px; height:21px; flex-shrink:0}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link { position:fixed; top:12px; left:12px; z-index:100; background:var(--ink); color:white; padding:10px 20px; border-radius:8px; transform:translateY(-150%)}
.skip-link:focus { transform:none}
.initial-loading { padding:60px}
.site-header { position:sticky; top:0; z-index:20; background:rgba(248,249,243,.96); border-bottom:1px solid var(--line)}
.header-inner { max-width:1280px; height:82px; margin:auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:32px}
.logo { display:inline-flex; flex-shrink:0}
.logo-word { font-family:var(--display); font-size:39px; line-height:1; font-weight:500; letter-spacing:-.065em}
.logo-initial { font-weight:700}
.logo-dot { color:#66824f}
.desktop-nav { display:flex; align-items:center; gap:36px; margin-left:auto; font-size:14px; font-weight:500}
.desktop-nav a { display:flex; gap:6px; align-items:center; min-height:44px; position:relative}
.desktop-nav a:after { content:''; height:1px; position:absolute; bottom:8px; left:0; right:0; background:currentColor; opacity:0}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after { opacity:1}
.desktop-nav .icon { width:15px; height:15px}
.header-controls { display:flex; align-items:center; gap:16px}
.language-switch { display:flex; align-items:center; font-size:12px; gap:2px; border-left:1px solid var(--line); padding-left:25px}
.language-switch button { min-width:30px; min-height:44px; background:none; font-size:12px; padding:6px; font-weight:400; color:var(--muted)}
.language-switch button[aria-pressed="true"] { font-weight:700; color:var(--ink)}
.language-switch span { color:#889189}
.header-controls .menu-toggle { display:none}
.icon-button { display:flex; align-items:center; justify-content:center; background:none; width:44px; height:44px; border-radius:8px}
.icon-button:hover { background:#ecede4}
.mobile-nav { display:none; border-top:1px solid var(--line); padding:12px 24px 20px; background:var(--paper)}
.mobile-nav a { display:block; padding:12px; font-size:17px}
.hero { padding-top:38px}
.hero-heading { display:flex; justify-content:space-between; align-items:center; gap:40px}
.hero h1 { flex:1; line-height:1.02; font-weight:500; letter-spacing:-.055em}
.hero-description { width:43%; padding-top:14px}
.hero-description p { font-size:17px; line-height:1.65; max-width:465px}
.hero-actions { display:flex; gap:25px; align-items:center; margin-top:24px}
.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:49px; padding:13px 23px; border-radius:10px; font-weight:500; font-size:14px; line-height:1.3; transition:background-color .16s,box-shadow .16s; white-space:normal}
.button.primary { background:var(--green); color:white}
.button.primary:hover { background:#243f2e; box-shadow:0 3px 0 #bdd2ad}
.button:active { transform:translateY(1px)}
.button.secondary { background:var(--lime); color:var(--ink)}
.button.secondary:hover { background:#dae5a2}
.text-link { font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:8px; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#a1aba0; min-height:44px}
.text-link:hover { text-decoration-color:var(--ink)}
.intro-film { margin-top:30px; border-radius:24px; overflow:hidden; height:212px; background:var(--sage); display:flex; position:relative}
.film-copy { padding:24px 36px; width:57%; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; column-gap:28px; align-items:center}
.unavailable-label { display:inline-flex; gap:7px; align-items:center; font-size:11px; font-weight:500; color:#4d6254}
.unavailable-label .icon { width:15px; height:15px}
.film-copy>.unavailable-label { grid-column:1/-1; align-self:start}
.film-copy h2 { font-size:34px; line-height:1.06; letter-spacing:-.04em; font-weight:500}
.film-copy p { font-size:13px; max-width:185px; color:#4e6355; align-self:center}
.film-steps { grid-column:1/-1; display:flex; align-items:center; gap:13px; font-size:11px}
.film-steps>span { display:flex; align-items:center; gap:7px}
.film-steps b { background:rgba(255,255,255,.6); border-radius:50%; font-size:10px; width:20px; height:20px; display:grid; place-items:center; font-weight:500}
.film-steps>.icon { width:16px; height:16px; color:#7d8e7f}
.film-art { mask-image:linear-gradient(90deg,transparent,black 12%); width:43%; position:relative; overflow:hidden}
.film-art img { height:100%; width:100%; object-fit:cover; object-position:50% 50%; mix-blend-mode:normal}
.catalogue { padding-top:40px; padding-bottom:64px; scroll-margin-top:96px}
.section-heading { display:flex; gap:24px; justify-content:space-between; align-items:center}
.section-heading h2 { font-size:30px; font-weight:500; letter-spacing:-.04em}
.section-heading p { font-size:13px; margin-top:7px}
.search-field { display:flex; align-items:center; gap:10px; border:1px solid #cbd3c8; border-radius:10px; padding-left:15px; min-width:266px; width:285px; background:#fffef8}
.search-field>.icon { width:18px; height:18px; color:#657465}
.search-field:focus-within { border-color:var(--green); box-shadow:0 0 0 2px #dde6d6}
.search-field input { min-width:0; flex:1; padding:12px 0; background:none; color:var(--ink); border:0; font-size:13px; height:44px; outline:none}
.search-field input:focus-visible { outline:0}
.search-field input::-webkit-search-cancel-button { display:none}
.search-field input::placeholder { color:#697568}
.search-field .icon-button { width:38px; height:40px; flex-shrink:0}
.search-field .icon-button .icon { width:15px; height:15px}
.catalogue-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:22px 0 22px}
.filters { display:flex; flex-wrap:wrap; gap:8px}
.filter { display:inline-flex; gap:7px; align-items:center; justify-content:center; min-height:37px; padding:8px 16px; border-radius:20px; background:transparent; font-size:12px; border:1px solid var(--line); white-space:nowrap}
.filter .icon { width:14px; height:14px}
.filter:hover { background:#edf0e5; border-color:#b4c1af}
.filter[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink)}
.catalogue-meta { display:flex; gap:20px; align-items:center; font-size:11px; color:var(--muted)}
.reset-button { background:none; padding:8px 0; min-height:36px; text-decoration:underline; text-underline-offset:4px; font-size:11px}
#result-count { white-space:nowrap}
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.tool-card { display:block; min-width:0; border-radius:18px; outline-offset:5px!important}
.card-preview { position:relative; border-radius:18px; overflow:hidden; height:254px; transition:box-shadow .2s}
.tool-card:hover .card-preview { box-shadow:0 7px 18px #293b3110}
.tool-card:hover .card-open { background:var(--ink); color:white}
.tool-card:active .card-preview { box-shadow:0 0 0 2px var(--green)}
.preview-badge { position:absolute; top:17px; left:17px; background:#fffef4cf; color:#38463a; border-radius:6px; padding:5px 9px; font-size:10px; line-height:1.4}
.card-open { position:absolute; bottom:16px; right:16px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#ffffffab; transition:background-color .2s}
.card-open .icon { width:16px; height:16px}
.card-content { padding:17px 2px 0}
.card-category { font-size:10px; color:#5f6c61; display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.card-category>span { font-size:9px; background:var(--peach); color:#68513e; padding:2px 6px; border-radius:4px}
.card-content h3 { font-size:21px; font-weight:600; letter-spacing:-.025em}
.card-content p { font-size:12px; line-height:1.6; margin-top:7px; max-width:320px}
.tool-visual { position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate}
.calendar-visual { background:#e3ebe4}
.desktop-monitor { position:absolute; top:47px; left:11%; width:78%; filter:drop-shadow(0 8px 7px #35443719)}
.desktop-screen { position:relative; height:153px; padding:5px; background:#f6f5ef; border-radius:8px 8px 0 0; overflow:hidden}
.mountains { position:absolute; width:100%; height:100%; inset:0; display:block}
.desktop-screen>.mountains { width:calc(100% - 10px); height:calc(100% - 10px); inset:5px; border-radius:4px}
.desktop-icons { position:absolute; left:13px; top:13px; display:flex; flex-direction:column; gap:5px}
.desktop-icons i { color:#e9eee0; height:15px}
.desktop-icons .icon { width:13px; height:13px}
.calendar-widget { position:absolute; top:30px; right:13px; width:61%; padding:8px; background:#f8f9f0ed; border-radius:6px; box-shadow:0 3px 14px #20493312}
.calendar-head { display:flex; justify-content:space-between; font-size:7px; line-height:1.2; font-weight:600; margin-bottom:7px}
.calendar-head>span:last-child { font-weight:400; color:#6e796b}
.calendar-days { display:flex; justify-content:space-between; gap:1px}
.calendar-days>span { display:flex; flex-direction:column; align-items:center; font-size:8px; width:18px; padding:3px 0; line-height:1.4}
.calendar-days small { font-size:6px; font-weight:400}
.calendar-days b { font-weight:500}
.calendar-days .selected { background:#cdda91; border-radius:4px}
.calendar-task { display:flex; gap:4px; align-items:center; font-size:6px; margin-top:8px; line-height:1.3}
.calendar-task i { width:6px; height:6px; border:1px solid #819574; border-radius:2px; flex-shrink:0}
.calendar-task small { font-size:5px; margin-left:auto; color:#70836a}
.desktop-taskbar { position:absolute; bottom:7px; left:5px; right:5px; height:9px; background:#e5eaddc4; display:flex; justify-content:center; gap:4px; align-items:center}
.desktop-taskbar>span { width:4px; height:4px; background:#426052; border-radius:1px}
.desktop-taskbar small { position:absolute; right:5px; font-size:4px}
.monitor-chin { height:9px; background:#d8ded6; border-radius:0 0 5px 5px}
.monitor-stand { width:46px; height:20px; position:relative; margin:auto; background:#c8d2c7; clip-path:polygon(25% 0,75% 0,75% 70%,100% 92%,100% 100%,0 100%,0 92%,25% 70%)}
.visual-note { position:absolute; bottom:14px; left:18px; font-family:var(--display); font-size:10px; letter-spacing:-.02em; color:#4f6656; display:flex; align-items:center; gap:5px; line-height:1.2; max-width:75%}
.visual-note .icon { width:12px; height:12px}
.timeline-visual { background:var(--lavender)}
.editing-window { position:absolute; top:45px; left:9%; width:82%; height:177px; transform:rotate(-3deg); background:#fbfaf7; border-radius:7px; box-shadow:0 9px 14px #44415a17; overflow:hidden}
.window-top { height:20px; background:#f6f5f0; display:flex; align-items:center; justify-content:space-between; padding:0 8px; gap:5px; font-size:6px; color:#64627c; border-bottom:1px solid #e4e2ed}
.window-dots { display:flex; gap:3px}
.window-dots i { width:3px; height:3px; border-radius:50%; background:#aca7bd}
.window-top b { font-weight:700; background:#e4def2; color:#665688; font-size:7px; padding:1px 3px; border-radius:2px}
.editing-view { display:flex; position:relative; gap:8px; height:75px; padding:8px; background:#edebf2}
.edit-sidebar { width:26%; display:flex; flex-direction:column; gap:5px; padding:4px}
.edit-sidebar i { width:100%; height:5px; background:#d6d2e0; border-radius:2px}
.edit-sidebar i:nth-child(2) { width:65%}
.edit-sidebar i:nth-child(4) { width:80%}
.edit-video { position:relative; width:58%; overflow:hidden; border-radius:2px}
.edit-video .mountains { filter:saturate(.8)}
.video-title { position:absolute; bottom:11px; left:9px; color:#fff; font-family:var(--display); font-size:9px; letter-spacing:-.02em}
.edit-tools { display:flex; flex-direction:column; gap:5px; width:9%}
.edit-tools i { height:9px; background:#d9d5e4; border-radius:2px}
.timeline-ruler { height:16px; display:flex; justify-content:space-around; align-items:center; font-size:5px; color:#746d8a; background:#faf9fc}
.timeline-tracks { height:62px; position:relative; display:flex; flex-direction:column; gap:4px; padding:4px 9px 6px 25px; background:#f7f5fa}
.track { display:flex; gap:3px; height:12px}
.track i { display:block; border-radius:2px}
.track.purple i { background:#b6a7d6; width:36%}
.track.purple i:nth-child(2) { background:#9481bd; width:27%}
.track.peach { padding-left:20px}
.track.peach i { width:46%; background:#e2b5a4}
.track.peach i:nth-child(2) { width:22%; background:#e5c3b5}
.track.mint i { width:94%; background:repeating-linear-gradient(90deg,#a3c5b4 0 4px,#c0d7c8 4px 5px)}
.timeline-needle { position:absolute; left:46%; width:1px; top:0; bottom:0; background:#6d528e}
.timeline-needle:before { content:''; position:absolute; left:-3px; top:-3px; width:7px; height:5px; clip-path:polygon(0 0,100% 0,50% 100%); background:#6d528e}
.timeline-visual .visual-note { color:#65567e}
.sample-visual { background:var(--peach)}
.sample-sheet { position:absolute; top:55px; left:23%; width:54%; height:160px; border-radius:8px}
.back-sheet { background:#d8ae94; transform:rotate(-10deg) translate(-9px,-5px)}
.front-sheet { padding:15px; background:#fffcf4; transform:rotate(7deg); box-shadow:0 9px 12px #86532b15}
.sample-header { font-family:var(--display); font-size:12px; display:flex; justify-content:space-between; align-items:center; letter-spacing:-.02em}
.sample-header .icon { width:13px; height:13px; color:#b69665}
.sample-blocks { display:flex; gap:6px; margin:13px 0}
.sample-blocks i { height:32px; width:30%; background:#e3e9d2; border-radius:5px}
.sample-blocks i:nth-child(2) { background:#eee0cc}
.sample-blocks i:nth-child(3) { background:#ded9ed}
.sample-row { display:flex; align-items:center; gap:7px; margin-top:9px}
.sample-row b { width:8px; height:8px; border:1px solid #c6c9b9; border-radius:2px}
.sample-row span { height:4px; width:72%; background:#e1e3d7; border-radius:2px}
.sample-row:nth-last-of-type(2) span { width:56%}
.sample-footer { font-size:6px; position:absolute; bottom:12px; left:15px; color:#8f836c}
.sample-flower { position:absolute; width:49px; height:49px; left:15%; bottom:38px; transform:rotate(-12deg); filter:drop-shadow(0 3px 2px #8c482018)}
.sample-flower i { position:absolute; width:27px; height:27px; background:#d89564; border-radius:50%}
.sample-flower i:nth-child(1) { left:0; top:0}
.sample-flower i:nth-child(2) { right:0; top:0}
.sample-flower i:nth-child(3) { left:0; bottom:0}
.sample-flower i:nth-child(4) { right:0; bottom:0}
.sample-flower b { position:absolute; top:18px; left:18px; width:13px; height:13px; background:#f4c27a; border-radius:50%}
.sample-visual .visual-note { color:#7c573b}
.empty-state { grid-column:1/-1; padding:50px 20px 58px; text-align:center; border:1px dashed #c3cbbd; border-radius:20px; background:#f1f3e9}
.empty-state>.icon { width:32px; height:32px; margin-bottom:16px}
.empty-state p { margin:10px 0 22px; font-size:14px}
.workflow-section { background:#eef1e5; border-block:1px solid #e4e8d9; padding:64px 0 40px; scroll-margin-top:80px}
.workflow-heading { display:flex; gap:48px; align-items:center; justify-content:space-between}
.workflow-heading h2 { font-size:42px; max-width:660px; font-weight:500; letter-spacing:-.045em}
.workflow-heading>p { max-width:340px; font-size:15px}
.workflow-steps { padding:0; margin:36px 0 32px; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px}
.workflow-steps h3 { font-size:22px; font-weight:500; margin:17px 0 10px}
.workflow-steps p { font-size:13px; line-height:1.7; max-width:320px}
.step-art { width:60px; height:60px; position:relative; border-radius:16px; background:#e0e8cd; display:grid; place-items:center}
.step-art>.icon { width:30px; height:30px; color:#456046}
.step-art span { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:#f8f9f3; font-size:10px; display:grid; place-items:center; border:1px solid #d1d9c4}
.step-art-1 { background:#eae1c6; border-radius:16px 16px 16px 4px}
.step-art-1>.icon { color:#756442}
.step-art-2 { background:#e5def0; border-radius:50%}
.step-art-2>.icon { color:#74618b}
.agent-note { display:flex; gap:10px; align-items:center; border-top:1px solid #d8dfce; padding-top:21px; font-size:12px}
.agent-note .icon { width:17px; height:17px; color:#637458}
.guide-banner { margin-top:42px; margin-bottom:64px; max-width:1200px; background:var(--lavender); padding:26px 34px; border-radius:18px; display:flex; align-items:center; gap:20px; position:relative; overflow:hidden}
.guide-symbol { width:50px; height:50px; border-radius:14px; background:#f6f2fb; display:grid; place-items:center; color:#6e5d84}
.guide-symbol>.icon { width:25px; height:25px}
.guide-banner p { font-size:13px; color:#625274}
.guide-banner a { font-family:var(--display); font-size:24px; letter-spacing:-.03em; display:flex; gap:16px; align-items:center; color:#4b395e; min-height:42px}
.guide-banner a:hover { text-decoration:underline; text-underline-offset:4px}
.banner-flower { margin-left:auto; color:#b8a3d0; font-size:74px; line-height:1; transform:rotate(20deg); padding-right:12px}
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; padding-bottom:76px}
.faq>h2 { font-size:36px; font-weight:500; max-width:320px; letter-spacing:-.045em}
.faq-list details { border-bottom:1px solid var(--line); padding:18px 0}
.faq-list details:first-child { padding-top:0}
.faq-list summary { font-size:14px; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:20px; cursor:pointer; min-height:30px; align-items:center}
.faq-list summary::-webkit-details-marker { display:none}
.faq-list summary .icon { width:17px; height:17px; transition:transform .15s}
.faq-list details[open] summary .icon { transform:rotate(45deg)}
.faq-list details p { padding-top:15px; font-size:13px; line-height:1.75; max-width:540px}
.site-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; padding-top:35px; padding-bottom:32px; gap:40px}
.site-footer .logo-word { font-size:31px}
.site-footer p { font-size:11px; margin-top:9px}
.footer-links { display:flex; align-items:center; flex-wrap:wrap; gap:25px; font-size:12px}
.footer-links a:hover { text-decoration:underline}
.footer-links span { color:var(--muted); font-size:10px}
.detail-page,.guide-page { padding-top:28px}
.back-link { display:inline-flex; gap:9px; align-items:center; font-size:12px; font-weight:500; min-height:42px}
.back-link .icon { width:16px; height:16px}
.back-link:hover { text-decoration:underline; text-underline-offset:4px}
.detail-heading { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:25px 0 32px}
.product-category { display:flex; align-items:center; gap:14px; font-size:12px; margin-bottom:16px; font-weight:500; color:#58714f}
.product-category>span { background:#e9eede; color:#506148; font-size:10px; padding:4px 8px; border-radius:5px; font-weight:400}
.detail-heading h1 { font-size:clamp(42px,4.3vw,62px); font-weight:500; letter-spacing:-.05em; max-width:830px}
.detail-heading p { font-size:17px; max-width:690px; margin-top:15px; line-height:1.6}
.detail-heading>.button { flex-shrink:0}
.detail-preview { margin:0}
.detail-preview .tool-visual { height:440px; border-radius:24px}
.detail-preview figcaption { font-size:11px; color:var(--muted); padding:13px 3px 0}
.large .desktop-monitor { width:520px; left:50%; margin-left:-260px; top:35px}
.large .desktop-screen { height:310px; border-radius:13px 13px 0 0; padding:10px}
.large .desktop-screen>.mountains { width:calc(100% - 20px); height:calc(100% - 20px); inset:10px; border-radius:5px}
.large .desktop-icons { top:25px; left:25px; gap:12px}
.large .desktop-icons i { height:20px}
.large .desktop-icons .icon { width:20px; height:20px}
.large .calendar-widget { top:54px; right:32px; padding:15px; border-radius:12px; width:58%}
.large .calendar-head { font-size:14px; margin-bottom:15px}
.large .calendar-days>span { font-size:16px; width:36px; padding:5px 0}
.large .calendar-days small { font-size:11px}
.large .calendar-task { font-size:11px; gap:9px; margin-top:15px}
.large .calendar-task i { width:11px; height:11px}
.large .calendar-task small { font-size:9px}
.large .desktop-taskbar { height:17px; left:10px; right:10px; bottom:10px; gap:8px}
.large .desktop-taskbar>span { width:7px; height:7px}
.large .desktop-taskbar small { font-size:8px; right:11px}
.large .monitor-chin { height:18px}
.large .monitor-stand { height:45px; width:92px}
.large .visual-note { font-size:14px; left:28px; bottom:22px}
.large .visual-note .icon { width:17px; height:17px}
.large .editing-window { width:570px; height:331px; left:50%; margin-left:-285px; top:44px}
.large .window-top { height:36px; font-size:11px; padding:0 15px}
.large .window-dots { gap:5px}
.large .window-dots i { width:5px; height:5px}
.large .window-top b { font-size:12px; padding:2px 5px}
.large .editing-view { height:148px; padding:14px; gap:14px}
.large .edit-sidebar { gap:10px; padding:8px}
.large .edit-sidebar i { height:8px}
.large .edit-tools { gap:10px}
.large .edit-tools i { height:18px}
.large .video-title { font-size:19px; left:19px; bottom:26px}
.large .timeline-ruler { height:28px; font-size:9px}
.large .timeline-tracks { height:115px; padding:8px 20px 12px 48px; gap:7px}
.large .track { height:25px; gap:6px}
.large .track.peach { padding-left:36px}
.large .sample-sheet { width:290px; height:290px; left:50%; margin-left:-145px; top:66px; border-radius:15px}
.large .front-sheet { padding:27px}
.large .sample-header { font-size:22px}
.large .sample-header .icon { width:24px; height:24px}
.large .sample-blocks { gap:11px; margin:24px 0}
.large .sample-blocks i { height:59px; border-radius:9px}
.large .sample-row { gap:13px; margin-top:16px}
.large .sample-row b { width:14px; height:14px}
.large .sample-row span { height:7px}
.large .sample-footer { font-size:11px; bottom:20px; left:27px}
.large .sample-flower { width:83px; height:83px; left:calc(50% - 204px); bottom:80px}
.large .sample-flower i { width:46px; height:46px}
.large .sample-flower b { top:31px; left:31px; width:22px; height:22px}
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:72px; margin-top:45px}
.detail-section { padding:0 0 40px}
.detail-section h2 { font-size:30px; margin-bottom:20px; font-weight:500}
.lead-copy { font-size:16px; line-height:1.8}
.feature-list { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:13px}
.feature-list li { display:flex; gap:12px; align-items:flex-start; font-size:14px; color:#4e6352; line-height:1.65}
.feature-list .icon { width:18px; height:18px; margin-top:3px; color:#638349}
.agent-role { padding:26px 28px; background:#eaf0db; border-radius:15px; margin:0 0 42px}
.agent-role>span { display:flex; gap:7px; align-items:center; font-size:11px; font-weight:500; color:#5d714c}
.agent-role>span>.icon { width:15px; height:15px}
.agent-role h3 { font-size:23px; margin:10px 0 12px; font-weight:500}
.agent-role p { font-size:13px; line-height:1.8; color:#536449}
.prompt-list { display:grid; gap:10px}
.prompt-list blockquote { display:flex; align-items:flex-start; gap:12px; background:#eeecf5; border-radius:10px; padding:16px 18px; margin:0}
.prompt-list .icon { color:#7d6993; width:17px; height:17px; margin-top:1px}
.prompt-list p { color:#4f4562; font-size:14px; line-height:1.6}
.fine-print { font-size:11px!important; line-height:1.7; margin-top:15px}
.tutorial-placeholder { display:flex; gap:22px; background:#ecefe7; padding:27px; border-radius:16px; margin-bottom:42px}
.tutorial-icon { width:66px; height:80px; border:1px solid #c5cec0; border-radius:10px; display:grid; place-items:center; color:#708564; flex-shrink:0; background:#f6f7ee}
.tutorial-icon>.icon { width:30px; height:30px}
.tutorial-placeholder h3 { font-size:24px; margin:8px 0; font-weight:500}
.tutorial-placeholder p { font-size:12px; line-height:1.7; max-width:430px}
.numbered-steps { list-style:none; padding:0; margin:27px 0 0; display:grid; gap:27px}
.numbered-steps li { display:flex; gap:20px; align-items:flex-start}
.step-number { width:33px; height:33px; flex-shrink:0; background:#e8eddc; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-size:14px; font-weight:500; line-height:1}
.numbered-steps h3 { font-size:21px; font-weight:500; letter-spacing:-.03em; line-height:1.25; margin-bottom:10px}
.numbered-steps p { font-size:13px; line-height:1.8}
.lively-link { margin:20px 0 0 53px; font-size:12px}
.good-to-know { border-top:1px solid var(--line); padding:25px 0 20px}
.good-to-know h3 { font-size:21px; margin-bottom:12px; font-weight:500}
.good-to-know p { font-size:12px; line-height:1.8}
.requirements-panel { padding:27px; background:#f0f2e9; border:1px solid #dce2d3; border-radius:15px}
.requirements-panel h2 { font-size:26px; font-weight:500}
.requirements-panel dl { margin:22px 0 0}
.requirements-panel dl>div { padding:15px 0; border-top:1px solid #dce2d3}
.requirements-panel dl>div:last-child { padding-bottom:0}
.requirements-panel dt { font-size:12px; font-weight:600; margin-bottom:5px}
.requirements-panel dd { font-size:12px; line-height:1.75; color:var(--muted); margin:0}
.download-panel { background:var(--lavender); border-radius:15px; padding:28px; margin-top:20px}
.download-icon { width:46px; height:46px; border-radius:10px; background:#f4f0fa; display:grid; place-items:center; color:#756389; margin-bottom:21px}
.download-icon>.icon { width:24px; height:24px}
.download-panel h2 { font-size:29px; font-weight:500; max-width:250px; color:#4e3f60; margin-bottom:16px}
.download-panel p { font-size:12px; line-height:1.75; color:#685d74}
.download-panel .button { margin-top:23px; width:100%; font-size:11px; gap:8px; min-height:46px}
.download-panel .button:disabled { background:#d9d3e2; color:#5a5264; box-shadow:none}
.download-panel .button .icon { width:16px; height:16px}
.aside-guide { display:flex; align-items:center; gap:12px; margin:22px 6px; padding:8px 0; font-size:12px}
.aside-guide>span { display:flex; flex-direction:column; gap:4px; flex:1}
.aside-guide small { font-size:10px; color:var(--muted)}
.aside-guide strong { font-weight:500; font-size:12px; line-height:1.5}
.aside-guide>.icon { width:20px; height:20px}
.aside-guide>.icon:last-child { width:17px; height:17px}
.aside-guide:hover strong { text-decoration:underline}
.bottom-back { margin:25px 0 50px}
.guide-heading { display:grid; grid-template-columns:1.4fr .8fr; gap:48px; align-items:center; margin:25px 0 58px}
.guide-heading h1 { font-size:clamp(40px,4.5vw,65px); letter-spacing:-.05em; font-weight:500; line-height:1.08}
.guide-heading p { font-size:16px; line-height:1.75; max-width:650px; margin-top:22px}
.guide-heading .product-category>.icon { width:18px; height:18px}
.guide-illustration { border-radius:50% 50% 22% 22%; overflow:hidden; background:var(--sage); aspect-ratio:1}
.guide-illustration img { height:100%; width:100%; object-fit:cover; mix-blend-mode:normal}
.guide-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:80px}
.guide-layout .numbered-steps { margin:0; gap:33px}
.guide-layout .numbered-steps h3 { font-size:25px}
.guide-layout .numbered-steps p { font-size:14px; line-height:1.85}
.guide-layout .step-number { width:39px; height:39px}
.first-message { background:#e9eddb; padding:28px; border-radius:16px; align-self:start; position:sticky; top:120px}
.message-icon { width:45px; height:45px; background:#f6f8ed; display:grid; place-items:center; border-radius:50%; margin-bottom:20px}
.first-message h2 { font-size:27px; font-weight:500}
.first-message blockquote { font-family:var(--display); font-size:21px; line-height:1.45; letter-spacing:-.025em; margin:22px 0; color:#405039}
.first-message p { font-size:11px; line-height:1.85}
.guide-end { display:flex; justify-content:space-between; align-items:center; gap:30px; border-top:1px solid var(--line); margin-top:50px; padding:36px 0 60px}
.guide-end h2 { font-size:30px; font-weight:500}
.guide-end p { font-size:14px; margin-top:10px}
.not-found { text-align:center; padding-top:75px; padding-bottom:90px}
.not-found-art { width:105px; height:105px; border-radius:32px; background:var(--peach); display:grid; place-items:center; margin:0 auto 32px; transform:rotate(-8deg)}
.not-found-art>.icon { width:53px; height:53px; color:#a97750}
.not-found h1 { font-size:52px; font-weight:500}
.not-found p { margin:20px auto 30px; max-width:440px; font-size:15px}
.product-video { max-width:100%; border-radius:16px; margin-bottom:40px}

@media(min-width:1450px) { .hero { padding-top:44px}
.hero-heading h1 { font-size:80px}
.intro-film { height:230px}
.catalogue { padding-top:44px}
}

@media(max-width:1100px) { .wrap { padding-inline:30px}
.header-inner { padding-inline:30px}
.desktop-nav { gap:23px}
.hero h1 { font-size:64px}
.hero-description { width:46%}
.hero-description p { font-size:15px}
.hero-actions { gap:18px}
.intro-film { height:200px}
.film-copy { padding:22px 25px; column-gap:20px}
.film-copy h2 { font-size:29px}
.film-copy p { font-size:12px}
.card-preview { height:230px}
.desktop-monitor { top:47px; left:9%; width:82%}
.desktop-screen { height:134px}
.calendar-widget { padding:6px; width:65%; right:10px; top:28px}
.calendar-head { font-size:6px}
.calendar-days>span { font-size:7px}
.calendar-task { font-size:5px}
.editing-window { top:46px; height:157px}
.editing-view { height:66px}
.timeline-tracks { height:53px}
.track { height:10px}
.sample-sheet { top:52px; height:145px; padding:12px}
.sample-header { font-size:10px}
.sample-blocks { margin:10px 0}
.sample-blocks i { height:27px}
.sample-row { margin-top:8px}
.card-content h3 { font-size:19px}
.card-content p { font-size:11px}
.workflow-heading h2 { font-size:37px}
.workflow-steps { gap:30px}
.guide-banner { margin-inline:30px}
.faq { gap:60px}
.detail-layout { gap:35px; grid-template-columns:minmax(0,1fr) 300px}
.detail-heading h1 { font-size:48px}
.detail-heading .button { font-size:12px}
.detail-heading p { font-size:15px}
.guide-layout { gap:40px; grid-template-columns:minmax(0,1fr) 280px}
.large .desktop-screen { height:310px}
.large .calendar-widget { padding:15px; width:58%; right:32px; top:54px}
.large .calendar-head { font-size:14px}
.large .calendar-days>span { font-size:16px}
.large .calendar-task { font-size:11px}
.large .editing-window { height:331px}
.large .editing-view { height:148px}
.large .timeline-tracks { height:115px}
.large .track { height:25px}
.large .sample-sheet { height:290px; padding:27px}
.large .sample-header { font-size:22px}
.large .sample-blocks { margin:24px 0}
.large .sample-blocks i { height:59px}
.large .sample-row { margin-top:16px}
}

@media(max-width:800px) { .header-inner { height:74px; gap:15px}
.logo-word { font-size:36px}
.desktop-nav { gap:17px; font-size:12px}
.language-switch { padding-left:15px}
.hero { padding-top:32px}
.hero h1 { font-size:52px}
.hero-description { width:48%; padding-top:4px}
.hero-description p { font-size:13px}
.hero-description p br { display:none}
.hero-actions { gap:12px; margin-top:18px; flex-wrap:wrap}
.hero-actions .button { font-size:12px; padding:12px 17px; gap:12px; min-height:44px}
.hero-actions .text-link { font-size:12px}
.intro-film { height:190px}
.film-copy { width:59%; grid-template-columns:1fr; grid-template-rows:auto 1fr auto}
.film-copy h2 { font-size:30px}
.film-copy>p { display:none}
.film-art { width:41%}
.film-steps { gap:8px; font-size:9px}
.film-steps b { width:16px; height:16px; font-size:9px}
.film-steps>span { gap:4px}
.section-heading h2 { font-size:26px}
.section-heading { gap:20px}
.search-field { width:220px; min-width:210px}
.catalogue-controls { gap:12px}
.filter { padding:8px 12px; font-size:11px}
.catalogue-meta { gap:10px}
.reset-button { font-size:10px}
.tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px}
.card-preview { height:248px}
.desktop-screen { height:154px}
.calendar-head { font-size:7px}
.calendar-days>span { font-size:8px}
.calendar-task { font-size:6px}
.editing-window { height:177px}
.editing-view { height:76px}
.timeline-tracks { height:62px}
.track { height:12px}
.sample-sheet { height:160px; padding:15px}
.sample-header { font-size:12px}
.sample-blocks { margin:13px 0}
.sample-blocks i { height:32px}
.workflow-heading { align-items:flex-start; gap:25px}
.workflow-heading h2 { font-size:34px}
.workflow-heading>p { max-width:240px; font-size:13px}
.workflow-steps { gap:24px}
.workflow-steps h3 { font-size:20px}
.workflow-steps p { font-size:12px}
.faq { grid-template-columns:1fr; gap:26px}
.faq>h2 { max-width:460px}
.site-footer { gap:24px}
.footer-links { justify-content:flex-end; gap:15px}
.footer-links span { width:100%; text-align:right}
.detail-heading { gap:20px; align-items:flex-start}
.detail-heading h1 { font-size:42px}
.detail-heading>.button { display:none}
.detail-layout { grid-template-columns:1fr; gap:24px; margin-top:32px}
.detail-aside { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.download-panel { margin:0}
.aside-guide { grid-column:1/-1; margin:0}
.detail-preview .tool-visual { height:400px}
.large .desktop-monitor { width:480px; margin-left:-240px}
.large .desktop-screen { height:280px}
.large .calendar-widget { width:61%; right:24px}
.large .visual-note { font-size:12px}
.large .editing-window { width:520px; margin-left:-260px; top:34px}
.large .sample-sheet { top:45px}
.large .sample-flower { bottom:60px}
.guide-heading { gap:28px; grid-template-columns:1.6fr .9fr; margin-bottom:40px}
.guide-heading h1 { font-size:43px}
.guide-heading p { font-size:14px}
.guide-layout { grid-template-columns:1fr; gap:35px}
.first-message { position:static}
.first-message blockquote { max-width:620px}
.guide-end h2 { font-size:26px}
}

@media(max-width:640px) { html { scroll-padding-top:88px}
.wrap { padding-inline:22px}
.header-inner { padding:0 22px; height:70px}
.logo-word { font-size:34px}
.desktop-nav { display:none}
.header-controls { gap:8px}
.language-switch { border:0; padding-left:0}
.language-switch button { min-width:30px; font-size:11px}
.header-controls .menu-toggle { display:flex}
.mobile-nav { display:block}
.hero { padding-top:29px}
.hero-heading { display:block}
.hero h1 { font-size:clamp(44px,10.5vw,63px); line-height:1.05; max-width:500px}
.hero-description { width:100%; padding-top:18px}
.hero-description p { font-size:14px; max-width:400px; line-height:1.75}
.hero-description p br { display:block}
.hero-actions { gap:22px; margin-top:21px}
.hero-actions .button { min-height:47px; font-size:13px; padding:13px 18px; gap:16px}
.hero-actions .text-link { font-size:12px}
.intro-film { height:202px; margin-top:27px; border-radius:18px}
.film-copy { width:56%; padding:20px; grid-template-rows:auto 1fr auto; gap:10px}
.film-copy h2 { font-size:27px; letter-spacing:-.035em}
.film-copy .unavailable-label { font-size:9px; gap:5px; white-space:nowrap}
.film-copy .unavailable-label .icon { width:12px; height:12px}
.film-steps { flex-wrap:wrap; gap:5px; line-height:1.3; font-size:8px}
.film-steps>.icon { width:10px; height:10px}
.film-steps b { display:none}
.film-art { width:44%}
.film-art img { object-fit:contain; object-position:center; height:100%; width:100%; transform:scale(1.35)}
.catalogue { padding-top:32px; padding-bottom:42px; scroll-margin-top:86px}
.section-heading { display:block}
.section-heading h2 { font-size:28px; max-width:340px; line-height:1.13}
.section-heading p { font-size:12px; margin-top:9px}
.search-field { width:100%; margin-top:20px}
.catalogue-controls { display:block; margin:17px 0 18px}
.filters { gap:7px}
.filter { font-size:10px; min-height:36px; padding:8px 12px}
.catalogue-meta { margin-top:10px; min-height:22px; justify-content:flex-end}
.catalogue-meta .reset-button { margin-right:auto; min-height:25px; padding:5px 0}
.tool-grid { grid-template-columns:1fr; gap:29px}
.card-preview { height:270px}
.desktop-monitor { top:50px; left:12%; width:76%}
.desktop-screen { height:169px}
.calendar-widget { width:62%; padding:9px; top:34px; right:13px}
.calendar-head { font-size:7px}
.calendar-days>span { font-size:9px; width:23px}
.calendar-days small { font-size:6px}
.calendar-task { font-size:7px; gap:5px}
.calendar-task small { font-size:6px}
.editing-window { top:50px; height:190px; width:80%; left:10%}
.window-top { height:23px; font-size:7px}
.editing-view { height:83px}
.video-title { font-size:11px}
.timeline-ruler { height:17px; font-size:6px}
.timeline-tracks { height:65px}
.track { height:13px}
.sample-sheet { top:54px; height:175px; width:54%; left:23%; padding:17px}
.sample-header { font-size:13px}
.sample-blocks i { height:35px}
.sample-row { margin-top:10px}
.sample-footer { font-size:7px}
.sample-flower { bottom:45px}
.visual-note { font-size:11px}
.card-content { padding:15px 2px 0}
.card-content h3 { font-size:23px}
.card-content p { font-size:13px; max-width:none}
.card-category { font-size:11px; margin-bottom:6px}
.preview-badge { font-size:10px}
.workflow-section { padding:38px 0 30px}
.workflow-heading { display:block}
.workflow-heading h2 { font-size:34px; max-width:420px}
.workflow-heading>p { margin-top:18px; max-width:380px; font-size:14px}
.workflow-steps { grid-template-columns:1fr; gap:27px; margin-top:30px}
.workflow-steps li { padding-left:75px; position:relative; min-height:64px}
.step-art { position:absolute; left:0; top:2px; width:52px; height:52px}
.workflow-steps h3 { font-size:23px; margin:0 0 9px}
.workflow-steps p { font-size:13px; max-width:360px}
.agent-note { align-items:flex-start; font-size:11px; gap:8px}
.agent-note .icon { margin-top:1px}
.guide-banner { margin:28px 22px 42px; padding:21px; gap:14px; border-radius:15px}
.guide-symbol { width:42px; height:48px; flex-shrink:0}
.guide-banner p { font-size:11px; line-height:1.5}
.guide-banner a { font-size:20px; gap:8px; line-height:1.3}
.guide-banner a .icon { width:18px; height:18px}
.banner-flower { display:none}
.faq { gap:25px; padding-bottom:42px}
.faq>h2 { font-size:31px; max-width:340px}
.faq-list summary { font-size:13px; min-height:35px; line-height:1.6}
.faq-list details p { font-size:12px}
.site-footer { padding-top:27px; padding-bottom:25px; display:block}
.site-footer .logo-word { font-size:32px}
.site-footer p { font-size:11px}
.footer-links { margin-top:22px; justify-content:flex-start; gap:12px 25px}
.footer-links span { text-align:left; line-height:1.6}
.detail-page,.guide-page { padding-top:18px}
.back-link { font-size:11px}
.detail-heading { padding:21px 0 25px}
.product-category { font-size:11px; gap:10px; margin-bottom:14px}
.detail-heading h1 { font-size:43px}
.detail-heading p { font-size:15px; margin-top:15px}
.detail-preview .tool-visual { height:300px; border-radius:17px}
.detail-preview figcaption { font-size:10px; line-height:1.7; padding:12px 0 0}
.large .desktop-monitor { width:85%; left:7.5%; margin:0; top:32px}
.large .desktop-screen { height:200px; padding:6px}
.large .desktop-screen>.mountains { inset:6px; width:calc(100% - 12px); height:calc(100% - 12px)}
.large .calendar-widget { top:36px; right:17px; padding:10px; border-radius:7px; width:62%}
.large .calendar-head { font-size:8px; margin-bottom:9px}
.large .calendar-days>span { font-size:11px; width:24px; padding:4px 0}
.large .calendar-days small { font-size:7px}
.large .calendar-task { font-size:7px; margin-top:10px; gap:6px}
.large .calendar-task i { width:7px; height:7px}
.large .calendar-task small { font-size:6px}
.large .desktop-icons { left:17px; top:19px; gap:7px}
.large .desktop-icons .icon { width:15px; height:15px}
.large .desktop-taskbar { height:11px; left:6px; right:6px; bottom:6px; gap:5px}
.large .desktop-taskbar>span { width:5px; height:5px}
.large .desktop-taskbar small { font-size:5px}
.large .monitor-chin { height:12px}
.large .monitor-stand { height:27px; width:60px}
.large .visual-note { font-size:10px; bottom:12px; left:17px}
.large .visual-note>.icon { width:13px; height:13px}
.large .editing-window { width:85%; left:7.5%; margin:0; top:43px; height:215px}
.large .window-top { height:25px; font-size:7px; padding-inline:10px}
.large .window-top b { font-size:9px; padding:1px 3px}
.large .editing-view { height:92px; gap:8px; padding:10px}
.large .edit-sidebar { gap:7px; padding:4px}
.large .edit-sidebar i { height:6px}
.large .edit-tools { gap:7px}
.large .edit-tools i { height:12px}
.large .video-title { font-size:11px; left:10px; bottom:17px}
.large .timeline-ruler { height:18px; font-size:6px}
.large .timeline-tracks { height:79px; padding:6px 12px 8px 30px; gap:5px}
.large .track { height:17px; gap:4px}
.large .track.peach { padding-left:20px}
.large .sample-sheet { width:56%; left:22%; margin:0; top:52px; height:185px; padding:17px}
.large .sample-header { font-size:13px}
.large .sample-header .icon { width:15px; height:15px}
.large .sample-blocks { margin:16px 0; gap:7px}
.large .sample-blocks i { height:38px; border-radius:6px}
.large .sample-row { margin-top:11px; gap:9px}
.large .sample-row b { width:10px; height:10px}
.large .sample-row span { height:5px}
.large .sample-footer { font-size:7px; left:17px; bottom:15px}
.large .sample-flower { width:55px; height:55px; left:15%; bottom:49px}
.large .sample-flower i { width:30px; height:30px}
.large .sample-flower b { width:15px; height:15px; top:20px; left:20px}
.detail-layout { margin-top:27px; gap:14px}
.detail-section { padding-bottom:31px}
.detail-section h2 { font-size:28px; margin-bottom:17px}
.lead-copy { font-size:14px}
.feature-list { gap:12px}
.feature-list li { font-size:13px}
.agent-role { padding:22px; margin-bottom:31px}
.agent-role h3 { font-size:23px}
.agent-role p { font-size:12px}
.prompt-list blockquote { padding:15px; gap:10px}
.prompt-list p { font-size:13px}
.fine-print { font-size:10px!important}
.tutorial-placeholder { padding:20px; gap:16px; margin-bottom:32px}
.tutorial-icon { width:45px; height:63px; border-radius:8px}
.tutorial-icon>.icon { width:24px; height:24px}
.tutorial-placeholder h3 { font-size:22px}
.tutorial-placeholder p { font-size:11px}
.tutorial-placeholder .unavailable-label { font-size:10px}
.numbered-steps { gap:24px}
.numbered-steps li { gap:15px}
.numbered-steps h3 { font-size:21px; line-height:1.3}
.numbered-steps p { font-size:12px}
.step-number { width:29px; height:29px}
.lively-link { margin-left:44px; font-size:11px; line-height:1.7}
.good-to-know p { font-size:12px}
.detail-aside { display:block}
.requirements-panel { padding:23px}
.requirements-panel h2 { font-size:27px}
.download-panel { margin-top:18px; padding:24px}
.download-panel h2 { max-width:300px}
.download-panel .button { font-size:12px; min-height:49px}
.aside-guide { margin:18px 2px}
.bottom-back { margin:10px 0 35px}
.guide-heading { display:block; margin:22px 0 32px}
.guide-heading h1 { font-size:42px}
.guide-heading p { font-size:14px; margin-top:18px}
.guide-illustration { display:none}
.guide-layout .numbered-steps { gap:29px}
.guide-layout .numbered-steps h3 { font-size:23px}
.guide-layout .numbered-steps p { font-size:13px}
.guide-layout .step-number { width:30px; height:30px}
.first-message { padding:24px}
.first-message h2 { font-size:27px}
.first-message blockquote { font-size:21px; line-height:1.5}
.guide-end { display:block; margin-top:32px; padding:29px 0 42px}
.guide-end h2 { font-size:30px}
.guide-end p { font-size:13px; margin:13px 0 23px}
.not-found { padding-top:55px; padding-bottom:65px}
.not-found h1 { font-size:40px}
.not-found p { font-size:14px}
}

@media(max-width:360px) { .wrap { padding-inline:18px}
.header-inner { padding-inline:18px}
.hero h1 { font-size:38px}
.hero-description p { font-size:13px}
.hero-actions { gap:16px}
.hero-actions .button { font-size:12px; padding-inline:15px; gap:10px}
.intro-film { height:190px}
.film-copy { padding:17px; width:60%}
.film-art { width:40%}
.film-copy h2 { font-size:25px}
.film-steps { gap:4px; font-size:7px}
.section-heading h2 { font-size:26px}
.filter { font-size:9px; padding:8px 10px}
.card-preview { height:245px}
.desktop-screen { height:150px}
.calendar-task { font-size:6px}
.editing-window { height:170px}
.editing-view { height:72px}
.sample-sheet { height:158px; padding:13px}
.sample-header { font-size:11px}
.sample-blocks i { height:29px}
.sample-row { margin-top:8px}
.guide-banner { margin-inline:18px}
.guide-banner a { font-size:18px}
.detail-heading h1,.guide-heading h1 { font-size:37px}
.large .calendar-head { font-size:7px}
.large .calendar-task { font-size:6px}
.large .calendar-days>span { font-size:10px}
.large .sample-header { font-size:11px}
}

@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto}
*,*:before,*:after { transition:none!important; animation:none!important}
}


.default-photo { margin:20px 0 0}
.default-photo img { border-radius:12px; width:100%; height:auto}
.default-photo figcaption { font-size:10px; line-height:1.6; color:var(--muted); margin-top:8px}
.tool-preview-image { display:block; width:100%; height:100%; object-fit:cover; border-radius:18px}
.detail-preview .tool-preview-image { height:auto; max-height:540px; object-fit:contain; border-radius:24px}
@media(max-width:800px) and (min-width:641px) { .default-photo { grid-row:2; grid-column:1/-1; width:50%}
}