/* Liréo: warm paper, editorial headings, quiet tools, room for the artwork. */
:root{--paper:#f7f5ef;--ink:#203b38;--muted:#536663;--line:#d7dfd8;--accent:#245b4c;--blue:#e2ede5;--gold:#e9bd75}
body{font-family:Manrope,system-ui,sans-serif;font-size:14px;line-height:1.5}
button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #9b641d;outline-offset:3px}
button:disabled{opacity:.55;cursor:not-allowed}.btn{min-height:44px;gap:10px;font-size:13px;border-radius:10px;padding:11px 18px;transition:background .16s,box-shadow .16s}.btn:hover:not(:disabled){box-shadow:0 3px 12px #203b3818}.btn.light{background:#fffefa}.btn.soft{color:#234b3d;background:#dfebe1}
.skip-link{position:fixed;left:16px;top:-100px;z-index:200;background:#fff;padding:12px;border:2px solid var(--accent)}.skip-link:focus{top:12px}
.demo{height:auto;min-height:48px;padding:8px clamp(16px,4vw,64px);letter-spacing:0}.demo>a{font:23px Georgia,serif}#tramea-navigation{gap:16px}#tramea-navigation a,#tramea-navigation button{font-size:12px}#tramea-navigation button{border:0;text-decoration:underline;text-underline-offset:4px}
.topbar{height:82px}.hero{padding-top:64px;padding-bottom:80px}.hero h1{font-size:clamp(48px,5.8vw,84px);letter-spacing:-3px;line-height:1.04}.hero em{color:var(--accent)}.hero p{color:var(--muted);font-size:17px;line-height:1.75;max-width:43ch}.hero-art .comic{border-radius:8px}.eyebrow{font-size:10px;letter-spacing:1.8px}.step h3{font-size:18px}.step p{font-size:14px}.creative-note{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted)}
.shell{grid-template-columns:208px minmax(0,1fr)}.sidebar{background:#edf1e9;padding:28px 16px;gap:25px}.workspace-label{line-height:1.7}.side-nav button{min-height:46px;font-size:13px;border-radius:10px}.side-nav button.selected{background:#dbe7db;color:#204637}.side-bottom{font-size:12px}.main{padding-inline:clamp(20px,3.5vw,56px)}.app-header{height:64px;font-size:12px}.page-head{gap:16px;flex-wrap:wrap;margin:32px 0 26px}.page-head h1{font-size:clamp(30px,3vw,44px);overflow-wrap:anywhere}.page-head p{font-size:14px}.banner{border-radius:16px;padding:24px;background:#e6ede2}.banner p{font-size:14px}.banner h3{font-size:26px}.resume-banner .btn{background:var(--ink);color:white}.project-tile{border-radius:14px;box-shadow:0 3px 12px #203b3806}.project-body{padding:20px}.project p{font-size:13px}.project-meta{font-size:12px;gap:10px}.project-actions{gap:8px}.project-actions .btn{font-size:12px;padding:8px 10px}.project-actions>button{color:#82503e}.badge{font-size:11px;color:#365b42;border-radius:100px}.tabs button{min-height:44px;font-size:14px}.search{min-height:44px;max-width:280px;background:#fffefa}.projects{gap:20px}.empty-start{grid-column:1/-1;max-width:760px;padding:48px 24px;border:1px dashed #9fb4a5;border-radius:16px;text-align:center;background:#fffefa}.empty-start p{margin:16px auto 24px;max-width:48ch}.empty-start h2{font-size:30px}
.back-link{padding:5px 0;font-size:13px;color:var(--muted);margin-bottom:8px}.journey-nav{display:flex;gap:8px;background:#e9eee7;border-radius:14px;padding:6px;margin-bottom:22px}.journey-nav button{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:8px 12px;border-radius:10px;font-weight:600;color:var(--muted)}.journey-nav button span{font-size:11px;opacity:.7}.journey-nav button[aria-current]{background:#fffefa;color:var(--ink);box-shadow:0 2px 8px #203b380a}.atelier{grid-template-columns:172px minmax(0,1fr);gap:20px;margin-top:0}.stages button{min-height:44px;font-size:13px}.stages button.active{font-weight:600}.path-hint{font-size:12px;color:var(--muted);margin:16px 8px;line-height:1.6}.stage-card{padding:clamp(16px,2.2vw,32px);border-radius:16px;background:#fffefa}.stage-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.stage-heading h2{font-size:30px}.stage-card p{font-size:13px}.field{font-size:13px;gap:7px}input,select,textarea{border-radius:8px;background:#fffefa;min-height:44px}textarea{font-size:14px}.stage-footer{align-items:center;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}.project-utilities summary{cursor:pointer;font-size:12px;color:var(--muted);padding:10px 0}.project-utilities .btn{margin:8px 6px 0 0}.save-line{position:sticky;bottom:0;background:#fffefa;padding:10px 0;margin-bottom:0!important}.save-line [role=status]{font-size:12px}.save-error{color:#9a3525}
.atelier:has(.board-studio){display:block}.atelier:has(.board-studio)>.stages{display:none}.board-studio{grid-template-columns:minmax(0,1fr) minmax(240px,300px)}.board-studio .portrait-sheet{width:min(100%,600px,63dvh)}.board-studio .portrait-desk{padding:clamp(16px,2.5vw,38px);background:#e9eee8;border:0;border-radius:12px;min-height:400px}.studio-actions{margin-top:0;padding-top:0;background:#fffefa!important}.studio-actions [data-board=preview]{background:var(--ink);color:white;border-color:var(--ink);margin-left:auto}.board-studio .board-controls{background:#f5f5ee;border:1px solid var(--line);border-radius:12px;padding:16px}.board-controls>h3{font-size:20px}.board-studio .studio-options{background:#fffefa;border-radius:8px;padding:12px}.studio-options summary{min-height:28px;font-size:13px}.board-pages .btn{min-height:44px;white-space:nowrap;padding:9px 13px}.board-pages [aria-current=page]{background:#dce9de;color:#1b4434;outline:0;font-weight:700}.board-studio .board-controls textarea{min-height:85px}.portrait-meta{font-size:12px}.composition-grid .btn{min-height:70px}.case-move,.case-resize{width:26px;height:26px}.account-card,.resource-project,.table-wrap,.stat{border-radius:14px}.resource-project h2{font-size:28px}dialog{border-radius:18px;padding:28px}dialog h2{font-size:29px}dialog::backdrop{background:#142f32b8}.actions{justify-content:flex-end}
.book-reader{width:min(1200px,96vw);max-width:1200px;max-height:94dvh;padding:24px;background:#f4f1e8;overflow:auto;color:var(--ink)}.book-reader::backdrop{background:#102b2be6;backdrop-filter:blur(6px)}.book-reader:fullscreen{width:100vw;max-width:none;height:100dvh;max-height:none}.book-header{display:flex;justify-content:space-between;align-items:start;gap:16px}.book-header .eyebrow{display:block;margin-bottom:4px}.book-header h2{font-size:clamp(22px,3vw,32px);overflow-wrap:anywhere}.book-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}.book-tools label{display:flex;align-items:center;gap:8px;font-size:12px}.book-tools select{width:auto;max-width:180px;padding:8px}.book-tools>.btn{margin-left:auto}.book-viewport{overflow:auto;max-height:62dvh;min-height:240px;border-radius:10px;background:#dce4db;padding:20px;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}.book-spread{display:flex;justify-content:center;align-items:start;width:calc(100% * var(--reader-zoom,1));min-width:100%;gap:0;margin:auto}.book-leaf{width: min(100%,390px);flex:0 0 auto;aspect-ratio:1240/1754;background:#fff;box-shadow:0 8px 25px #203b382b;transform-origin:left center;position:relative}.book-leaf canvas{display:block;width:100%;height:auto}.book-spread.double .book-leaf{width:min(50%,390px)}.book-spread.double .book-leaf:first-child::after{content:'';pointer-events:none;position:absolute;inset:0 0 0 auto;width:18px;background:linear-gradient(90deg,transparent,#203b3824)}.book-spread[style*="--reader-zoom: 1.5"] .book-leaf,.book-spread[style*="--reader-zoom: 2"] .book-leaf{width:100%;max-width:none}.book-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0}.book-position{font-size:13px;text-align:center;font-variant-numeric:tabular-nums}.book-index summary{cursor:pointer;min-height:44px;padding:10px 0;font-size:13px}.book-thumbnails{display:flex;gap:10px;overflow-x:auto;padding:5px 4px 12px}.book-thumbnail{flex:0 0 64px;padding:5px;border:1px solid var(--line);border-radius:6px;font-size:12px;background:#fffefa}.book-thumbnail[aria-current=page]{outline:2px solid var(--accent);outline-offset:1px}.book-miniature{display:block;position:relative;width:52px;aspect-ratio:1240/1754;background:white}.book-miniature>span{position:absolute;border:1px solid #9baaa1;overflow:hidden;background:#f0eee4}.book-miniature img{width:100%;height:100%;object-fit:cover}.book-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.book-bottom p{font-size:12px;max-width:55ch}.book-bottom .btn{flex-shrink:0}
@media(min-width:1100px){.board-studio .board-controls{top:78px;max-height:calc(100dvh - 96px)}}
@media(max-width:1050px){.shell{grid-template-columns:175px minmax(0,1fr)}.main{padding-inline:20px}.board-studio{grid-template-columns:minmax(0,1fr) 240px}.board-studio .board-controls{position:static}.projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.board-studio{grid-template-columns:minmax(0,1fr)}.board-studio .portrait-sheet{width:min(100%,480px)}.board-studio .portrait-desk{min-height:0}.board-controls{position:static;max-height:none}.studio-actions{position:static}.journey-nav button{gap:6px;padding:10px 6px;font-size:12px}.journey-nav button span{display:none}.atelier{grid-template-columns:1fr}.stages{display:flex;flex-wrap:wrap}.path-hint{flex-basis:100%;margin:6px}.stages .btn{width:100%}.book-leaf{width:min(100%,390px)}}
@media(max-width:650px){.shell{display:block}.sidebar{padding:12px 16px;gap:10px}.sidebar>.logo{display:none}.side-nav{gap:4px}.side-nav button{padding:10px 12px;flex-shrink:0}.main{padding-inline:16px}.app-header{height:48px}.app-header>span:last-child{display:none}.page-head{margin:24px 0 20px}.page-head h1{font-size:32px}.projects{grid-template-columns:minmax(0,1fr)}.banner{padding:20px}.resume-banner .btn{width:100%}.hero{padding:36px 6% 50px}.hero h1{letter-spacing:-2px}.hero p{font-size:16px}.topbar .logo{display:none}.topbar{height:64px;justify-content:flex-end}.topbar nav{width:100%;justify-content:flex-end}.steps{grid-template-columns:1fr}.section-head{display:block}.section-head>.muted{display:block;margin-top:12px}.stage-card{padding:16px}.stage-heading h2{font-size:26px}.studio-actions{gap:6px}.studio-actions .btn{font-size:12px;padding:9px 11px}.studio-actions [data-board=preview]{margin-left:0}.stage-footer{gap:16px}.book-reader{padding:14px;width:96vw;max-height:96dvh}.book-header{flex-wrap:wrap}.book-header>.btn{min-height:40px;padding:8px 12px;font-size:12px}.book-tools{gap:8px}.book-tools label{font-size:11px}.book-tools select{max-width:145px}.book-tools>.btn{margin-left:0}.book-viewport{padding:10px;max-height:58dvh}.book-footer{gap:6px}.book-footer .btn{font-size:12px;padding:10px}.book-position{font-size:11px}.book-bottom{flex-wrap:wrap}.book-bottom .btn{width:100%}#tramea-navigation{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

body:has(.hero)>.demo{display:none}

.hero .access-note{font-size:12px;margin:12px 0 0}.cover-placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:40px 24px;background:linear-gradient(145deg,#e4ece1,#f4e8cd);text-align:center}.cover-placeholder span{font-size:9px;letter-spacing:2px;color:var(--muted)}.cover-placeholder strong{font:28px Georgia,serif;overflow-wrap:anywhere}.library-utilities{margin-top:28px;padding-top:16px;border-top:1px solid var(--line)}.library-utilities summary{cursor:pointer;min-height:44px;font-size:13px}.library-utilities p{font-size:12px;color:var(--muted)}

/* Shared bubble and folded-page identity. */
.tramea-logo{display:block;width:210px;max-width:100%;height:auto}.topbar .logo{display:flex;align-items:center;padding-left:0;letter-spacing:0}.sidebar .tramea-logo{width:170px}.demo .tramea-logo{width:145px}
@media(max-width:650px){.topbar .logo{display:flex}.topbar .tramea-logo{width:145px}.topbar{justify-content:space-between;gap:16px}.topbar nav{width:auto}.topbar nav .btn{padding:10px 12px;font-size:12px}}