{"id":422,"date":"2020-04-07T17:59:10","date_gmt":"2020-04-07T17:59:10","guid":{"rendered":"http:\/\/pappcseperke.hu\/?page_id=422"},"modified":"2026-07-18T08:18:35","modified_gmt":"2026-07-18T06:18:35","slug":"soon","status":"publish","type":"page","link":"https:\/\/pappcseperke.hu\/hu\/","title":{"rendered":"Soon"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"422\" class=\"elementor elementor-422\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a7723fb elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a7723fb\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[{&quot;jet_parallax_layout_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;_id&quot;:&quot;778bf61&quot;,&quot;jet_parallax_layout_image_tablet&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_image_mobile&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_speed&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:50,&quot;sizes&quot;:[]},&quot;jet_parallax_layout_type&quot;:&quot;scroll&quot;,&quot;jet_parallax_layout_direction&quot;:&quot;1&quot;,&quot;jet_parallax_layout_fx_direction&quot;:null,&quot;jet_parallax_layout_z_index&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x&quot;:50,&quot;jet_parallax_layout_bg_x_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y&quot;:50,&quot;jet_parallax_layout_bg_y_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size&quot;:&quot;auto&quot;,&quot;jet_parallax_layout_bg_size_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_animation_prop&quot;:&quot;transform&quot;,&quot;jet_parallax_layout_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;]}],&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-02cefff\" data-id=\"02cefff\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7ffab3f elementor-widget elementor-widget-html\" data-id=\"7ffab3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<div class=MainTitle><div class=BGpicture><img decoding=\"async\" src=\"https:\/\/pappcseperke.hu\/wp-content\/uploads\/2021\/01\/Fern-300x142.png\"><\/div>\n<div class=picture><img decoding=\"async\" src=\"https:\/\/pappcseperke.hu\/wp-content\/uploads\/2021\/01\/Picture.png\"><\/div>\n<div class=papp><span class=base>P<\/span><span class=shift>a<\/span><span class=base>p<\/span><span  class=shift>p<\/span><\/div>\n<div class=cseperke><span class=base>C<\/span><span class=shift>s<\/span><span  class=base>e<\/span><span class=shift>p<\/span><span  class=base>e<\/span><span class=shift>r<\/span><span  class=base>k<\/span><span class=shift>e<\/span><\/div>\n<div class=Art>Rendszerek<\/div>\n<div class=And>\u00e9s<\/div>\n<div class=Design>Diz\u00e1jn<\/div>\n<\/div>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80a177b elementor-widget elementor-widget-html\" data-id=\"80a177b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>.elementor-element-80a177b{display:none !important}<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e2780a8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e2780a8\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[{&quot;jet_parallax_layout_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;_id&quot;:&quot;76891cd&quot;,&quot;jet_parallax_layout_image_tablet&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_image_mobile&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_speed&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:50,&quot;sizes&quot;:[]},&quot;jet_parallax_layout_type&quot;:&quot;scroll&quot;,&quot;jet_parallax_layout_direction&quot;:&quot;1&quot;,&quot;jet_parallax_layout_fx_direction&quot;:null,&quot;jet_parallax_layout_z_index&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x&quot;:50,&quot;jet_parallax_layout_bg_x_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y&quot;:50,&quot;jet_parallax_layout_bg_y_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size&quot;:&quot;auto&quot;,&quot;jet_parallax_layout_bg_size_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_animation_prop&quot;:&quot;transform&quot;,&quot;jet_parallax_layout_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;]}],&quot;background_background&quot;:&quot;classic&quot;,&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e4ca44d\" data-id=\"e4ca44d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c2e4432 elementor-nav-menu__align-center elementor-nav-menu--dropdown-tablet elementor-nav-menu__text-align-aside elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu\" data-id=\"c2e4432\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;layout&quot;:&quot;horizontal&quot;,&quot;submenu_icon&quot;:{&quot;value&quot;:&quot;&lt;i class=\\&quot;fas fa-caret-down\\&quot; aria-hidden=\\&quot;true\\&quot;&gt;&lt;\\\/i&gt;&quot;,&quot;library&quot;:&quot;fa-solid&quot;},&quot;toggle&quot;:&quot;burger&quot;}\" data-widget_type=\"nav-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<nav aria-label=\"Men\u00fc\" class=\"elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-none\">\n\t\t\t\t<ul id=\"menu-1-c2e4432\" class=\"elementor-nav-menu\"><li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14628\"><a href=\"https:\/\/pappcseperke.hu\/#projects\" class=\"elementor-item elementor-item-anchor\">Projects<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14629\"><a href=\"https:\/\/pappcseperke.hu\/#commissions\" class=\"elementor-item elementor-item-anchor\">Work with me<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14632\"><a href=\"https:\/\/pappcseperke.hu\/#systems\" class=\"elementor-item elementor-item-anchor\">Systems<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14633\"><a href=\"https:\/\/pappcseperke.hu\/#patterns\" class=\"elementor-item elementor-item-anchor\">Patterns<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14634\"><a href=\"https:\/\/pappcseperke.hu\/#about\" class=\"elementor-item elementor-item-anchor\">About me<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14635\"><a href=\"https:\/\/pappcseperke.hu\/#notes\" class=\"elementor-item elementor-item-anchor\">Notes<\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t<div class=\"elementor-menu-toggle\" role=\"button\" tabindex=\"0\" aria-label=\"Men\u00fc kapcsol\u00f3\" aria-expanded=\"false\">\n\t\t\t<i aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--open eicon-menu-bar\"><\/i><i aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--close eicon-close\"><\/i>\t\t<\/div>\n\t\t\t\t\t<nav class=\"elementor-nav-menu--dropdown elementor-nav-menu__container\" aria-hidden=\"true\">\n\t\t\t\t<ul id=\"menu-2-c2e4432\" class=\"elementor-nav-menu\"><li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14628\"><a href=\"https:\/\/pappcseperke.hu\/#projects\" class=\"elementor-item elementor-item-anchor\" tabindex=\"-1\">Projects<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14629\"><a href=\"https:\/\/pappcseperke.hu\/#commissions\" class=\"elementor-item elementor-item-anchor\" tabindex=\"-1\">Work with me<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14632\"><a href=\"https:\/\/pappcseperke.hu\/#systems\" class=\"elementor-item elementor-item-anchor\" tabindex=\"-1\">Systems<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14633\"><a href=\"https:\/\/pappcseperke.hu\/#patterns\" class=\"elementor-item elementor-item-anchor\" tabindex=\"-1\">Patterns<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14634\"><a href=\"https:\/\/pappcseperke.hu\/#about\" class=\"elementor-item elementor-item-anchor\" tabindex=\"-1\">About me<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-14635\"><a href=\"https:\/\/pappcseperke.hu\/#notes\" class=\"elementor-item elementor-item-anchor\" tabindex=\"-1\">Notes<\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-b5cae94 e-flex e-con-boxed e-con e-parent\" data-id=\"b5cae94\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8a6b36c e-con-full e-flex e-con e-child\" data-id=\"8a6b36c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6620bd7 animated-slow elementor-invisible elementor-widget elementor-widget-jet-animated-text\" data-id=\"6620bd7\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"jet-animated-text.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-jet-animated-text jet-elements\">\n<div class=\"jet-animated-text jet-animated-text--effect-fx11\" data-settings='{&quot;effect&quot;:&quot;fx11&quot;,&quot;delay&quot;:8000}'>\n\t\t<div class=\"jet-animated-text__animated-text\">\n<div class=\"jet-animated-text__animated-text-item active visible\" dir=\"ltr\">\n\t<span>I<\/span><span>n<\/span><span>f<\/span><span>o<\/span><span>r<\/span><span>m<\/span><span>a<\/span><span>t<\/span><span>i<\/span><span>o<\/span><span>n<\/span><\/div>\n<div class=\"jet-animated-text__animated-text-item\" dir=\"ltr\">\n\t<span>D<\/span><span>e<\/span><span>c<\/span><span>i<\/span><span>s<\/span><span>i<\/span><span>o<\/span><span>n<\/span><\/div>\n<div class=\"jet-animated-text__animated-text-item\" dir=\"ltr\">\n\t<span>I<\/span><span>n<\/span><span>t<\/span><span>e<\/span><span>r<\/span><span>a<\/span><span>c<\/span><span>t<\/span><span>i<\/span><span>v<\/span><span>e<\/span><\/div>\n<div class=\"jet-animated-text__animated-text-item\" dir=\"ltr\">\n\t<span>A<\/span><span>d<\/span><span>a<\/span><span>p<\/span><span>t<\/span><span>i<\/span><span>v<\/span><span>e<\/span><\/div>\n<\/div>\t<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2666168 elementor-widget elementor-widget-heading\" data-id=\"2666168\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Systems &amp;\nDESIGN<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bf678b4 e-flex e-con-boxed e-con e-child\" data-id=\"bf678b4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94a131f elementor-widget elementor-widget-heading\" data-id=\"94a131f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Digital Equilibrist<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5ea7b9 elementor-widget elementor-widget-html\" data-id=\"c5ea7b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"balancing-wrapper\">\n  <h2 class=\"balancing-text\">\n   Fool on a Tightrope\n  <\/h2>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aab9128 elementor-widget elementor-widget-heading\" data-id=\"aab9128\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Structure where it matters. Play just for fun...<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c583eeb elementor-widget elementor-widget-text-editor\" data-id=\"c583eeb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"362\" data-end=\"476\">I\u2019m Cseperke Papp, mad scientist of typography, visualization, and motion. I take delight in building visualizations and the systems that hold them up, experimenting with the mathematics of rhythm, type, and movement.<\/p><p data-start=\"362\" data-end=\"476\">My biggest experiment: <strong><a href=\"https:\/\/decisionthemes.com\">Decision Themes<\/a><\/strong>, an open-source design system generator that turns decisions into a coherent system.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a60b3f1 elementor-widget elementor-widget-button\" data-id=\"a60b3f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/pappcseperke.hu\/contact\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Follow the work<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c1bd4c8 e-flex e-con-boxed e-con e-parent\" data-id=\"c1bd4c8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60dbcc2 elementor-widget elementor-widget-menu-anchor\" data-id=\"60dbcc2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"projects\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87ef464 elementor-widget elementor-widget-heading\" data-id=\"87ef464\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">the laboratory<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2da0ce elementor-widget elementor-widget-heading\" data-id=\"f2da0ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">A solo designer lab\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0eb9807 elementor-widget elementor-widget-heading\" data-id=\"0eb9807\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">These are its experiments.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8aa50ba elementor-widget elementor-widget-text-editor\" data-id=\"8aa50ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The common thread is visualization \u2014 systems made visible. Typographic engines, manuscript-flavored interfaces, motion tools, timelines, breathing worlds: different shapes of an inspired craft.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ed9c7e e-grid e-con-full e-con e-child\" data-id=\"7ed9c7e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-adf1307 elementor-flip-box--effect-flip elementor-flip-box--direction-up elementor-widget elementor-widget-flip-box\" data-id=\"adf1307\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"flip-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-flip-box\" tabindex=\"0\">\n\t\t\t<div class=\"elementor-flip-box__layer elementor-flip-box__front\">\n\t\t\t\t<div class=\"elementor-flip-box__layer__overlay\">\n\t\t\t\t\t<div class=\"elementor-flip-box__layer__inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper elementor-view-default\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-flip-box__layer__title\">\n\t\t\t\t\t\t\t\tDecision Themes\t\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-flip-box__layer__description\">\n\t\t\t\t\t\t\t\tA design system generator that shows its math \u2014 whole visual systems derived from a handful of decisions. \t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<a class=\"elementor-flip-box__layer elementor-flip-box__back\" href=\"http:\/\/studio.decisionthemes.com\/\">\n\t\t\t<div class=\"elementor-flip-box__layer__overlay\">\n\t\t\t\t<div class=\"elementor-flip-box__layer__inner\">\n\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-flip-box__layer__title\">\n\t\t\t\t\t\t\tstudio DTS\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-flip-box__layer__description\">\n\t\t\t\t\t\t\tExperience the system\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-flip-box__button elementor-button elementor-size-sm\">\n\t\t\t\t\t\t\tstudio.decisionthemes.com \u2192\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2f47b7 elementor-flip-box--effect-flip elementor-flip-box--direction-up elementor-widget elementor-widget-flip-box\" data-id=\"e2f47b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"flip-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-flip-box\" tabindex=\"0\">\n\t\t\t<div class=\"elementor-flip-box__layer elementor-flip-box__front\">\n\t\t\t\t<div class=\"elementor-flip-box__layer__overlay\">\n\t\t\t\t\t<div class=\"elementor-flip-box__layer__inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper elementor-view-default\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-flip-box__layer__title\">\n\t\t\t\t\t\t\t\tVisualization experiments\t\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-flip-box__layer__description\">\n\t\t\t\t\t\t\t\tTimelines, diagrams, motion studies \u2014 the mathematics of rhythm and movement, tested in public. The lab notebook, left open.\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<a class=\"elementor-flip-box__layer elementor-flip-box__back\" href=\"http:\/\/github.com\/CseperkePapp\/Visualizations\">\n\t\t\t<div class=\"elementor-flip-box__layer__overlay\">\n\t\t\t\t<div class=\"elementor-flip-box__layer__inner\">\n\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-flip-box__layer__title\">\n\t\t\t\t\t\t\tVISUALIZATION SYSTEMS\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-flip-box__layer__description\">\n\t\t\t\t\t\t\tOpen source, free\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-flip-box__button elementor-button elementor-size-sm\">\n\t\t\t\t\t\t\texplore on GIT HUB\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0e3f9c elementor-flip-box--effect-flip elementor-flip-box--direction-up elementor-widget elementor-widget-flip-box\" data-id=\"b0e3f9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"flip-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-flip-box\" tabindex=\"0\">\n\t\t\t<div class=\"elementor-flip-box__layer elementor-flip-box__front\">\n\t\t\t\t<div class=\"elementor-flip-box__layer__overlay\">\n\t\t\t\t\t<div class=\"elementor-flip-box__layer__inner\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper elementor-view-default\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-icon\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-flip-box__layer__title\">\n\t\t\t\t\t\t\t\tWe Are Patterns\t\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-flip-box__layer__description\">\n\t\t\t\t\t\t\t\tA book about how to look at the world through the pattern view and how the change in eprception changes our attitude, and our experience.\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<a class=\"elementor-flip-box__layer elementor-flip-box__back\" href=\"https:\/\/docs.google.com\/document\/d\/1hoxPs6x9L3_v7N3EXqfDmNgXmTR2VbZakP8pg6ZRu78\/edit?usp=sharing\">\n\t\t\t<div class=\"elementor-flip-box__layer__overlay\">\n\t\t\t\t<div class=\"elementor-flip-box__layer__inner\">\n\t\t\t\t\t\t\t\t\t\t\t<h3 class=\"elementor-flip-box__layer__title\">\n\t\t\t\t\t\t\tWhere patterns meet\t\t\t\t\t\t<\/h3>\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-flip-box__layer__description\">\n\t\t\t\t\t\t\tNew patterns are born\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-flip-box__button elementor-button elementor-size-sm\">\n\t\t\t\t\t\t\tChapter 1\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f55afe4 elementor-widget elementor-widget-text-editor\" data-id=\"f55afe4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>The Chaos Garden.<\/strong> The wilder growth lives one gate over: the Pendragon Companion, Ruby\u2019s Workshop,\u00a0 AI NPCs, Brink World, Animations, Videos, Scripted HUDs, Particles \u2014 experiments, fragments, and worlds in progress, unfiltered and unapologetic. Wander in when the gate opens&#8230; (Soon.)\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b1260a e-flex e-con-boxed e-con e-parent\" data-id=\"2b1260a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f3cf2f elementor-widget elementor-widget-menu-anchor\" data-id=\"5f3cf2f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"commissions\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3186cb elementor-widget elementor-widget-heading\" data-id=\"b3186cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">fund the lab<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b4f6b27 elementor-widget elementor-widget-heading\" data-id=\"b4f6b27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Every experiment needs funding.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf77054 elementor-widget elementor-widget-heading\" data-id=\"bf77054\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Here are three ways in.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df7d00b elementor-widget elementor-widget-html\" data-id=\"df7d00b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"funding\">\r\n  <li><span class=\"n\">1<\/span>\r\n    <span><strong>Buy me a cappucino.<\/strong> Small fuel, gratefully burned. Lactose free. \u2014\r\n    <a href=\"#\">buymeacoffee<\/a>.<\/span><\/li>\r\n  <li><span class=\"n\">2<\/span>\r\n    <span><strong>Sponsor the experiments.<\/strong> The goal is to create open source applications. Every sponsored hour is an hour the lab spends experimenting\r\n    instead of invoicing \u2014 <a href=\"#\">GitHub Sponsors<\/a>.<\/span><\/li>\r\n  <li><span class=\"n\">3<\/span>\r\n    <span><strong>Commission the lab.<\/strong> How it runs today: a limited number of client\r\n    projects a year, chosen for fit. The biggest single way to fund the work \u2014 it just borrows\r\n    the scientist while it does. Read on.<\/span><\/li>\r\n<\/ul>\r\n\r\n<style>\r\n.funding{ list-style:none; margin:0; padding:0; max-width:46rem; }\r\n.funding li{\r\n  display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:baseline;\r\n  padding:1.5rem 0;\r\n  border-bottom:1px solid rgba(147,148,152,.25);   \/* your neutral #939498 at 25% *\/\r\n}\r\n.funding .n{\r\n  font-family:'Cormorant Unicase', serif; font-size:2rem; line-height:1;\r\n  color:var(--e-global-color-457a0a7);              \/* your kit #D2C2AA *\/\r\n}\r\n.funding strong{ color:var(--e-global-color-primary); }  \/* #C0D8D5 *\/\r\n.funding a{ color:var(--e-global-color-accent); text-decoration:none; }  \/* #6EB4BA *\/\r\n.funding a:hover{ color:var(--e-global-color-primary); }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-149fce3 e-flex e-con-boxed e-con e-parent\" data-id=\"149fce3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cf202aa e-flex e-con-boxed e-con e-parent\" data-id=\"cf202aa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-aa86ee3 e-con-full e-flex e-con e-child\" data-id=\"aa86ee3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3983d29 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"3983d29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a337f5 elementor-widget elementor-widget-heading\" data-id=\"7a337f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Brand &amp; identity systems<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ec4bce elementor-widget elementor-widget-text-editor\" data-id=\"8ec4bce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>From logo to style guide to working templates \u2014 an identity that behaves the same on the hundredth asset as on the first.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25b4520 elementor-widget elementor-widget-text-editor\" data-id=\"25b4520\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For you if you\u2019re tired of brands that fall apart the moment someone else touches them.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-30b3993 e-con-full e-flex e-con e-child\" data-id=\"30b3993\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea7dacd elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"ea7dacd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-88c7019 elementor-widget elementor-widget-heading\" data-id=\"88c7019\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Websites &amp; automation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c9fc53 elementor-widget elementor-widget-text-editor\" data-id=\"9c9fc53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The problem-solving side of a systems designer. Sites designed and built from structure to ship \u2014 for small businesses, artists, craftsmen, practices, theatres, schools \u2014 and the working system underneath: document pipelines, content workflows, AI-assisted processes that remove the busywork. A website is just the visible end of a system that works.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0672db1 elementor-widget elementor-widget-text-editor\" data-id=\"0672db1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For you if you need a site that earns trust in five seconds \u2014 and a back office that stops eating your evenings.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9e3629d e-con-full e-flex e-con e-child\" data-id=\"9e3629d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10549ad elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"10549ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ca75bd elementor-widget elementor-widget-heading\" data-id=\"8ca75bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Visualizations &amp; design systems<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-624dcd5 elementor-widget elementor-widget-text-editor\" data-id=\"624dcd5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Making complex information visible: timelines, diagrams, motion, interfaces \u2014 and design systems generated with Decision Themes, so the visual language stays coherent long after I leave.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c19c3a7 elementor-widget elementor-widget-text-editor\" data-id=\"c19c3a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For you if the story is a seed in your head you want to bloom on the page.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a84161e e-flex e-con-boxed e-con e-parent\" data-id=\"a84161e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cdb2589 elementor-widget elementor-widget-menu-anchor\" data-id=\"cdb2589\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"systems\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed622b6 elementor-widget elementor-widget-heading\" data-id=\"ed622b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">The mad project<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37f01bc elementor-widget elementor-widget-heading\" data-id=\"37f01bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">DTS: A Design Decision System<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e91e72 elementor-widget elementor-widget-html\" data-id=\"8e91e72\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     THE THREE-DECISION PLAYGROUND \u2014 standalone Elementor HTML widget\n     2026-07-18 \u00b7 from home-v3-juggler (IIIA)\n\n     WHAT IT DOES\n     A live, tiny demo of the Decision Themes engine: three sliders \u2014\n     base size, ratio, hue \u2014 and everything on the right (headline size,\n     subhead, body copy, swatches, spacing bars, a readout of the raw\n     numbers) is a pure derivation of those three inputs. Drag a slider,\n     watch the whole specimen recompute in real time. The argument the\n     rest of the page makes in words, running live in one box.\n\n     HOW TO INSTALL\n     1. Elementor \u2192 add an HTML widget where the playground should sit.\n     2. Paste this entire file into the widget. Done.\n     3. Reuse anywhere: about page, Decision Themes landing page, a blog\n        post explaining the engine \u2014 it's fully self-contained.\n\n     NOTES\n     \u00b7 No dependencies beyond Google Fonts (Cormorant + Overlock) \u2014\n       no GSAP, no jQuery.\n     \u00b7 Everything is scoped under #cspPlayground \/ csp- prefixed classes\n       and ids; nothing leaks into your theme, and your theme can't\n       break it. Its own color\/font variables are local, not inherited\n       from the main site.\n     \u00b7 Fully keyboard accessible: three real <input type=range> elements.\n     ============================================================ -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Unicase:wght@600&family=Cormorant+SC:wght@600&family=Overlock:wght@400;700&display=swap\" rel=\"stylesheet\">\n\n<div id=\"cspPlayground\" class=\"csp-pg\">\n  <div class=\"csp-pg-decisions\">\n    <span class=\"csp-pg-title\">three decisions<\/span>\n    <label for=\"cspPgBase\">base size \u2014 <b id=\"cspPgBv\">18px<\/b>\n      <input type=\"range\" id=\"cspPgBase\" min=\"14\" max=\"22\" step=\"1\" value=\"18\"><\/label>\n    <label for=\"cspPgRatio\">ratio \u2014 <b id=\"cspPgRv\">1.333<\/b>\n      <input type=\"range\" id=\"cspPgRatio\" min=\"1150\" max=\"1500\" step=\"1\" value=\"1333\"><\/label>\n    <label for=\"cspPgHue\">hue \u2014 <b id=\"cspPgHv\">183\u00b0<\/b>\n      <input type=\"range\" id=\"cspPgHue\" min=\"0\" max=\"360\" step=\"1\" value=\"183\"><\/label>\n    <p class=\"csp-pg-note\">Three decisions. Everything on the right is consequences.<\/p>\n  <\/div>\n  <div class=\"csp-pg-specimen\">\n    <div class=\"csp-pg-h\" id=\"cspPgH\">Digital Equilibrist<\/div>\n    <div class=\"csp-pg-sub\" id=\"cspPgSub\">order where it matters<\/div>\n    <p class=\"csp-pg-body\" id=\"cspPgBody\">Play just for fun. The scale, the swatches and the spacing\n      below all derive from the three decisions on the left \u2014 the same way a whole site can.<\/p>\n    <div class=\"csp-pg-swatches\" id=\"cspPgSwatches\" aria-hidden=\"true\"><\/div>\n    <div class=\"csp-pg-bars\" id=\"cspPgBars\" aria-hidden=\"true\"><\/div>\n    <div class=\"csp-pg-readout\" id=\"cspPgReadout\" aria-hidden=\"true\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n#cspPlayground{\n  \/* the kit, locally scoped \u2014 change these to retheme it *\/\n  --csp-bg:        #1C1C1C;\n  --csp-sage:      #C0D8D5;\n  --csp-grey:      #CCCDD1;\n  --csp-teal:      #6EB4BA;\n  --csp-neutral:   #939498;\n  --csp-parchment: #EBDCC5;\n  --csp-parchment2:#D2C2AA;\n  --csp-deepteal:  #213333;\n\n  --csp-f-display: 'Cormorant Unicase', serif;\n  --csp-f-caps:    'Cormorant SC', serif;\n  --csp-f-body:    'Overlock', sans-serif;\n\n  max-width: 720px;\n  border:1px solid color-mix(in oklab, var(--csp-neutral) 30%, transparent);\n  background: color-mix(in oklab, var(--csp-deepteal) 20%, var(--csp-bg));\n  display:grid; grid-template-columns: 240px 1fr;\n  font-family: var(--csp-f-body); color: var(--csp-grey);\n  box-sizing: border-box;\n  transition: border-color .3s ease;\n}\n#cspPlayground *{ box-sizing:border-box; }\n@media (max-width:640px){ #cspPlayground{ grid-template-columns:1fr; } }\n\n#cspPlayground .csp-pg-decisions{\n  padding: 1.5rem;\n  border-right:1px dashed color-mix(in oklab, var(--csp-neutral) 30%, transparent);\n  display:flex; flex-direction:column; gap: 1rem;\n}\n@media (max-width:640px){\n  #cspPlayground .csp-pg-decisions{\n    border-right:none;\n    border-bottom:1px dashed color-mix(in oklab, var(--csp-neutral) 30%, transparent);\n  }\n}\n#cspPlayground .csp-pg-title{\n  font-family: var(--csp-f-caps); font-variant: small-caps; text-transform: lowercase;\n  letter-spacing:0.18em; color: var(--csp-parchment2); font-size: 0.85rem;\n}\n#cspPlayground label{\n  font-family: var(--csp-f-caps); font-variant: small-caps; text-transform: lowercase;\n  letter-spacing:0.12em; color: var(--csp-neutral); font-size: 0.85rem; display:block;\n}\n#cspPlayground label b{ color: var(--csp-sage); font-weight:600; }\n#cspPlayground input[type=range]{ width:100%; accent-color: var(--csp-teal); margin-top:4px; }\n#cspPlayground .csp-pg-note{\n  margin-top:auto; font-family: var(--csp-f-body); font-style:italic;\n  color: var(--csp-parchment2); font-size: 0.94rem; line-height:1.45;\n}\n#cspPlayground .csp-pg-specimen{ padding: 1.5rem; min-width:0; }\n#cspPlayground .csp-pg-h{\n  font-family: var(--csp-f-display); font-weight:600; color: var(--csp-sage);\n  line-height:1.1; transition: color .3s ease;\n}\n#cspPlayground .csp-pg-sub{\n  font-family: var(--csp-f-caps); font-variant: small-caps; text-transform: lowercase;\n  color: var(--csp-parchment2); margin-top:2px;\n}\n#cspPlayground .csp-pg-body{ margin-top: 0.5rem; max-width:44ch; line-height:1.5; }\n#cspPlayground .csp-pg-swatches{ display:flex; gap:0.5rem; margin-top: 0.75rem; }\n#cspPlayground .csp-pg-swatches div{ width:34px; height:34px; }\n#cspPlayground .csp-pg-bars{ display:flex; align-items:flex-end; gap:6px; margin-top: 0.75rem; }\n#cspPlayground .csp-pg-bars div{ height:8px; background: var(--csp-parchment2); opacity:.8; }\n#cspPlayground .csp-pg-readout{\n  margin-top: 0.75rem; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;\n  font-size: 0.85rem; color: var(--csp-neutral); line-height:1.7;\n}\n#cspPlayground .csp-pg-readout b{ color: var(--csp-grey); font-weight:400; }\n\n@media (prefers-reduced-motion: reduce){\n  #cspPlayground{ transition:none; }\n  #cspPlayground .csp-pg-h{ transition:none; }\n}\n<\/style>\n\n<script>\n\/* The engine, running in a box. Deterministic, dependency-free. *\/\n(function () {\n  'use strict';\n\n  var root = document.getElementById('cspPlayground');\n  if (!root) { return; }\n  function $(id){ return document.getElementById(id); }\n\n  var base = $('cspPgBase'), ratio = $('cspPgRatio'), hue = $('cspPgHue');\n  if (!base || !ratio || !hue) { return; }\n\n  var titleEl = root.querySelector('.csp-pg-title');\n\n  function derive(){\n    var b = +base.value, r = +ratio.value \/ 1000, h = +hue.value;\n    $('cspPgBv').textContent = b + 'px';\n    $('cspPgRv').textContent = r.toFixed(3);\n    $('cspPgHv').textContent = h + '\u00b0';\n\n    var ink = 'hsl(' + h + ',35%,58%)';\n    var s1 = b * r, s2 = s1 * r, s3 = s2 * r;\n    $('cspPgH').style.fontSize = Math.min(s2 * 1.15, 52) + 'px';\n    $('cspPgH').style.color = 'hsl(' + h + ',30%,80%)';\n    $('cspPgSub').style.fontSize = s1 * 0.85 + 'px';\n    $('cspPgSub').style.color = 'hsl(' + h + ',32%,64%)';\n    $('cspPgBody').style.fontSize = b * 0.85 + 'px';\n    root.style.borderColor = 'hsl(' + h + ',25%,32%)';\n\n    \/* the decisions column is derived too: sliders, values, title *\/\n    [base, ratio, hue].forEach(function (i) { i.style.accentColor = ink; });\n    if (titleEl) { titleEl.style.color = 'hsl(' + h + ',28%,72%)'; }\n    ['cspPgBv', 'cspPgRv', 'cspPgHv'].forEach(function (id) {\n      $(id).style.color = 'hsl(' + h + ',30%,74%)';\n    });\n\n    var cols = [\n      'hsl(' + h + ',35%,58%)', 'hsl(' + h + ',30%,38%)',\n      'hsl(' + h + ',25%,16%)', 'hsl(' + ((h + 200) % 360) + ',92%,60%)'\n    ];\n    $('cspPgSwatches').innerHTML = cols.map(function (c) {\n      return '<div style=\"background:' + c + '\"><\/div>';\n    }).join('');\n\n    var bars = '', k;\n    for (k = 0; k < 5; k++) {\n      bars += '<div style=\"width:' + (b * 0.5 * Math.pow(r, k)).toFixed(1) + 'px\"><\/div>';\n    }\n    $('cspPgBars').innerHTML = bars;\n\n    $('cspPgReadout').innerHTML =\n      'scale \u2192 <b>' + [b, s1, s2, s3].map(function (v) { return Math.round(v); }).join(' \u00b7 ') + '<\/b><br>' +\n      'spacing \u2192 <b>' + [1, 2, 3, 4].map(function (m) { return Math.round(b * 0.5 * m * r); }).join(' \u00b7 ') + '<\/b> &nbsp;\u00b7&nbsp; ' +\n      'ink \u2192 <b>hsl(' + h + ' 35% 58%)<\/b>';\n  }\n\n  [base, ratio, hue].forEach(function (i) { i.addEventListener('input', derive); });\n  derive();\n}());\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64c11b6 elementor-widget elementor-widget-text-editor\" data-id=\"64c11b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Decision Themes, my design system generator, turns a few base decisions \u2014 size, rhythm, color \u2014 into a complete, coherent design system, derived by rule. The math underneath is public: on GitHub and npm, with a live playground at decisionthemes.com.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b62e9cd elementor-widget elementor-widget-html\" data-id=\"b62e9cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul class=\"funding\">\r\n  <li><span class=\"n\">1<\/span>\r\n    <span><strong>Change one decision and its consequences follow.\r\n   <\/strong>\r\n   No hunting through forty files for everything that depended on it.<\/span><\/li>\r\n  <li><span class=\"n\">2<\/span>\r\n    <span><strong>Relational Typography:<\/strong> Style guides that stay true on the hundredth asset, not just in the pitch deck.<\/span><\/li>\r\n  <li><span class=\"n\">3<\/span>\r\n    <span><strong>\r\nDesigns survive revision.<\/strong> The logic holds even when the content, the language, or the brand color doesn\u2019t.<\/span><\/li>\r\n<\/ul>\r\n\r\n<style>\r\n.funding{ list-style:none; margin:0; padding:0; max-width:46rem; }\r\n.funding li{\r\n  display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:baseline;\r\n  padding:1.5rem 0;\r\n  border-bottom:1px solid rgba(147,148,152,.25);   \/* your neutral #939498 at 25% *\/\r\n}\r\n.funding .n{\r\n  font-family:'Cormorant Unicase', serif; font-size:2rem; line-height:1;\r\n  color:var(--e-global-color-457a0a7);              \/* your kit #D2C2AA *\/\r\n}\r\n.funding strong{ color:var(--e-global-color-primary); }  \/* #C0D8D5 *\/\r\n.funding a{ color:var(--e-global-color-accent); text-decoration:none; }  \/* #6EB4BA *\/\r\n.funding a:hover{ color:var(--e-global-color-primary); }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ddb6d14 elementor-widget elementor-widget-jet-button\" data-id=\"ddb6d14\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"jet-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-jet-button jet-elements\"><div class=\"jet-button__container\">\n\t<a class=\"jet-button__instance jet-button__instance--icon-left hover-effect-0\" href=\"https:\/\/studio.decisionthemes.com\/\" target=\"_blank\">\n\t\t<div class=\"jet-button__plane jet-button__plane-normal\"><\/div>\n\t\t<div class=\"jet-button__plane jet-button__plane-hover\"><\/div>\n\t\t<div class=\"jet-button__state jet-button__state-normal\">\n\t\t\t<span class=\"jet-button__label\">Try the playground \u2192<\/span>\t\t<\/div>\n\t\t<div class=\"jet-button__state jet-button__state-hover\">\n\t\t\t<span class=\"jet-button__label\">Try the playground \u2192<\/span>\t\t<\/div>\n\t<\/a>\n<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0844fd7 e-flex e-con-boxed e-con e-parent\" data-id=\"0844fd7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-481bed5 elementor-widget elementor-widget-menu-anchor\" data-id=\"481bed5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"patterns\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4746324 elementor-widget elementor-widget-heading\" data-id=\"4746324\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">We are Patterns<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15d8583 elementor-widget elementor-widget-heading\" data-id=\"15d8583\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How looking ourselves as interacting patterns changes the perspective<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62ec7c8 elementor-widget elementor-widget-text-editor\" data-id=\"62ec7c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Take the beauty of a fern: the mathematics of growth, and the pattern\u2019s adaptation to the chaos of life. We are such patterns \u2014 and I am writing a book about how seeing life that way affects our thinking about the world, life, death, and relationships.<\/p><p>Stand by for Chapter 1, coming soon.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-44a4d7a e-flex e-con-boxed e-con e-parent\" data-id=\"44a4d7a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[],&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79ecc04 elementor-widget elementor-widget-menu-anchor\" data-id=\"79ecc04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"about\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46312d5 elementor-widget elementor-widget-heading\" data-id=\"46312d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">circling similar patterns<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfbc006 elementor-widget elementor-widget-heading\" data-id=\"dfbc006\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Weaving dreams by giving them structure<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f37746a elementor-widget elementor-widget-text-editor\" data-id=\"f37746a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Thirty years ago I opened Budapest\u2019s Dragon\u2019s Lair RPG store and edited R\u00fana, Hungary\u2019s fantasy magazine; today I run a one-woman lab building all sorts of visualizations \u2014 design systems, interfaces, motion, timelines, helpful apps \u2014 and I write books and design worlds. In between came localization projects for Electronic Arts in Madrid and eight years of marketing asset design at NeocoreGames.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c3edc4 elementor-widget elementor-widget-text-editor\" data-id=\"7c3edc4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>I work solo, and I work with AI beside me \u2014 by necessity before it was fashionable. I have severe AuDHD and PDA; external structure isn\u2019t a productivity hack for me, it\u2019s how the work gets done at all. The systems I build, and the AI workflows threaded through everything I make, began as the scaffolding that keeps my own brain organized. That\u2019s also why they hold up: they\u2019re tested daily on the most demanding client I have.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-006d43d e-flex e-con-boxed e-con e-parent\" data-id=\"006d43d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5bdf161 elementor-widget elementor-widget-menu-anchor\" data-id=\"5bdf161\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"notes\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01aa34b elementor-widget elementor-widget-heading\" data-id=\"01aa34b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Notes from the workbench<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-499f8bd elementor-widget elementor-widget-heading\" data-id=\"499f8bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Systems &amp; AI \u00b7 Design craft \u00b7 Case notes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72e87f6 elementor-grid-1 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-widget elementor-widget-loop-grid\" data-id=\"72e87f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;template_id&quot;:14175,&quot;row_gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:5,&quot;sizes&quot;:[]},&quot;row_gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:5,&quot;sizes&quot;:[]},&quot;row_gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:5,&quot;sizes&quot;:[]},&quot;columns&quot;:1,&quot;_skin&quot;:&quot;post&quot;,&quot;columns_tablet&quot;:&quot;2&quot;,&quot;columns_mobile&quot;:&quot;1&quot;,&quot;edit_handle_selector&quot;:&quot;[data-elementor-type=\\&quot;loop-item\\&quot;]&quot;}\" data-widget_type=\"loop-grid.post\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-loop-container elementor-grid\" role=\"list\">\n\t\t<style id=\"loop-14175\">.elementor-14175 .elementor-element.elementor-element-c1f1536{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-b091af1 );--border-color:var( --e-global-color-b091af1 );--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );line-height:var( --e-global-typography-text-line-height );}.elementor-14175 .elementor-element.elementor-element-6325f29 > .elementor-widget-container{margin:0px 0px 0px 0px;border-style:none;border-radius:0px 0px 10px 10px;}.elementor-14175 .elementor-element.elementor-element-6325f29{width:var( --container-widget-width, 17.338% );max-width:17.338%;--container-widget-width:17.338%;--container-widget-flex-grow:0;z-index:5;}.elementor-14175 .elementor-element.elementor-element-6325f29.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-14175 .elementor-element.elementor-element-934dd4e{--display:flex;--justify-content:center;--overflow:hidden;border-style:none;--border-style:none;--border-radius:0px 0px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-14175 .elementor-element.elementor-element-934dd4e:not(.elementor-motion-effects-element-type-background), .elementor-14175 .elementor-element.elementor-element-934dd4e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-9157540 );}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );text-transform:var( --e-global-typography-primary-text-transform );color:var( --e-global-color-primary );}.elementor-14175 .elementor-element.elementor-element-bfa4937 .elementor-heading-title{font-family:\"Overlock\", Sans-serif;font-size:20px;font-weight:400;text-transform:none;font-style:normal;line-height:1.6em;}.elementor-14175 .elementor-element.elementor-element-bfa4937 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-style:none;border-radius:10px 10px 0px 0px;}.elementor-14175 .elementor-element.elementor-element-bfa4937.elementor-element{--align-self:flex-start;}.elementor-14175 .elementor-element.elementor-element-bfa4937{z-index:4;}@media(max-width:1024px){.elementor-widget-theme-post-featured-image .widget-image-caption{line-height:var( --e-global-typography-text-line-height );}.elementor-14175 .elementor-element.elementor-element-934dd4e{--border-radius:0px 0px 10px 10px;--margin-top:-10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-widget-theme-post-featured-image .widget-image-caption{line-height:var( --e-global-typography-text-line-height );}}<\/style>\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"14175\" class=\"elementor elementor-14175 e-loop-item e-loop-item-14669 post-14669 post type-post status-publish format-standard hentry category-egyeb\" data-elementor-post-type=\"elementor_library\" data-custom-edit-handle=\"1\">\n\t\t\t<div class=\"elementor-element elementor-element-c1f1536 e-flex e-con-boxed e-con e-parent\" data-id=\"c1f1536\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-934dd4e e-con-full e-flex e-con e-child\" data-id=\"934dd4e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[],&quot;animation&quot;:&quot;none&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfa4937 elementor-invisible elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"bfa4937\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/pappcseperke.hu\/hu\/michael-jackson-timeline\/\">Michael Jackson timeline<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"14175\" class=\"elementor elementor-14175 e-loop-item e-loop-item-14574 post-14574 post type-post status-publish format-standard has-post-thumbnail hentry category-egyeb\" data-elementor-post-type=\"elementor_library\" data-custom-edit-handle=\"1\">\n\t\t\t<div class=\"elementor-element elementor-element-c1f1536 e-flex e-con-boxed e-con e-parent\" data-id=\"c1f1536\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6325f29 elementor-widget__width-initial elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image\" data-id=\"6325f29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-featured-image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/pappcseperke.hu\/hu\/understanding-vector-landscapes-lesson-1\/\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/06\/pinballofvectorfields.jpg\" class=\"attachment-large size-large wp-image-14599\" alt=\"\" srcset=\"https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/06\/pinballofvectorfields.jpg 800w, https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/06\/pinballofvectorfields-300x225.jpg 300w, https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/06\/pinballofvectorfields-768x576.jpg 768w, https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/06\/pinballofvectorfields-16x12.jpg 16w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-934dd4e e-con-full e-flex e-con e-child\" data-id=\"934dd4e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[],&quot;animation&quot;:&quot;none&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfa4937 elementor-invisible elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"bfa4937\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/pappcseperke.hu\/hu\/understanding-vector-landscapes-lesson-1\/\">Understanding Vector Landscapes &#8211; Lesson 1<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div data-elementor-type=\"loop-item\" data-elementor-id=\"14175\" class=\"elementor elementor-14175 e-loop-item e-loop-item-14528 post-14528 post type-post status-publish format-standard has-post-thumbnail hentry category-egyeb\" data-elementor-post-type=\"elementor_library\" data-custom-edit-handle=\"1\">\n\t\t\t<div class=\"elementor-element elementor-element-c1f1536 e-flex e-con-boxed e-con e-parent\" data-id=\"c1f1536\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6325f29 elementor-widget__width-initial elementor-widget elementor-widget-theme-post-featured-image elementor-widget-image\" data-id=\"6325f29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"theme-post-featured-image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/pappcseperke.hu\/hu\/my-claude-base-instructions\/\">\n\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/05\/claude-1024x576.png\" class=\"attachment-large size-large wp-image-14573\" alt=\"\" srcset=\"https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/05\/claude-1024x576.png 1024w, https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/05\/claude-300x169.png 300w, https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/05\/claude-768x432.png 768w, https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/05\/claude-18x10.png 18w, https:\/\/pappcseperke.hu\/wp-content\/uploads\/2026\/05\/claude.png 1280w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-934dd4e e-con-full e-flex e-con e-child\" data-id=\"934dd4e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[],&quot;animation&quot;:&quot;none&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfa4937 elementor-invisible elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading\" data-id=\"bfa4937\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"theme-post-title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/pappcseperke.hu\/hu\/my-claude-base-instructions\/\">My Claude base instructions<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-35a2eb1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"35a2eb1\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[{&quot;jet_parallax_layout_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;_id&quot;:&quot;f1f4d1a&quot;,&quot;jet_parallax_layout_image_tablet&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_image_mobile&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_speed&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:50,&quot;sizes&quot;:[]},&quot;jet_parallax_layout_type&quot;:&quot;scroll&quot;,&quot;jet_parallax_layout_direction&quot;:&quot;1&quot;,&quot;jet_parallax_layout_fx_direction&quot;:null,&quot;jet_parallax_layout_z_index&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x&quot;:50,&quot;jet_parallax_layout_bg_x_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y&quot;:50,&quot;jet_parallax_layout_bg_y_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size&quot;:&quot;auto&quot;,&quot;jet_parallax_layout_bg_size_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_animation_prop&quot;:&quot;transform&quot;,&quot;jet_parallax_layout_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;]}],&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ade2b5d\" data-id=\"ade2b5d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c60d21 elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons\" data-id=\"4c60d21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"social-icons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-social-icons-wrapper elementor-grid\" role=\"list\">\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-animation-float elementor-repeater-item-2733276\" href=\"https:\/\/www.facebook.com\/cseperke.papp\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Facebook<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-facebook\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-animation-float elementor-repeater-item-df624f1\" href=\"https:\/\/twitter.com\/CseperkePapp\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Twitter<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-twitter\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-animation-float elementor-repeater-item-c872840\" href=\"https:\/\/www.youtube.com\/channel\/UC11WKwIn864et0Kn0dfQuEg\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Youtube<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-youtube\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-behance elementor-animation-float elementor-repeater-item-9dad35d\" href=\"https:\/\/www.behance.net\/cseperke\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Behance<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-behance\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-animation-float elementor-repeater-item-817e20b\" href=\"https:\/\/www.linkedin.com\/in\/cseperkepapp\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Linkedin<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-linkedin\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<span class=\"elementor-grid-item\" role=\"listitem\">\n\t\t\t\t\t<a class=\"elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-animation-float elementor-repeater-item-85aa2dc\" href=\"https:\/\/www.instagram.com\/cseperke.papp\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-screen-only\">Instagram<\/span>\n\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fab fa-instagram\"><\/i>\t\t\t\t\t<\/a>\n\t\t\t\t<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9814ea1 elementor-widget elementor-widget-text-editor\" data-id=\"9814ea1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0\u00a9 2025 Cseperke Papp<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d33a4e elementor-widget elementor-widget-text-editor\" data-id=\"4d33a4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/pappcseperke.hu\/?page_id=3\">Adatkezel\u00e9si t\u00e1j\u00e9koztat\u00f3<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-593d808 e-flex e-con-boxed e-con e-parent\" data-id=\"593d808\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef6ea84 elementor-widget elementor-widget-html\" data-id=\"ef6ea84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     THE TIGHTROPE WALKER \u2014 full-width variant, standalone Elementor HTML widget\n     2026-07-18 \u00b7 from home-v3-juggler\n\n     WHAT IT DOES\n     Same as elementor-ropewalker-widget.html, except the rope spans\n     the full viewport width edge-to-edge instead of being capped to\n     the site's 1120px content column. Use this version if the widget\n     sits in a full-width Elementor section, or if you just want the\n     rope to run all the way to both screen edges regardless of layout.\n\n     HOW TO INSTALL\n     1. Elementor \u2192 add an HTML widget anywhere on the page\n        (bottom of the page is tidy, but position doesn't matter \u2014\n        the walker fixes itself to the viewport bottom).\n     2. Paste this entire file into the widget. Done.\n     3. Site-wide: put the widget in your Elementor footer template.\n\n     NOTES\n     \u00b7 No dependencies. No GSAP, no jQuery \u2014 self-contained.\n     \u00b7 Everything is scoped under #cspRopeWalk; nothing leaks into\n       your theme, and your theme can't break it.\n     \u00b7 One caveat: the parent Elementor section must NOT have Motion\n       Effects \/ CSS transforms \u2014 transforms trap position:fixed.\n       A plain section is fine.\n     \u00b7 pointer-events: none \u2014 it never blocks clicks.\n     \u00b7 prefers-reduced-motion: she stands still, no spring, no act.\n     \u00b7 Only diff from the capped version: the svg rule below drops\n       max-width\/margin:auto and uses a small fixed side inset instead\n       of the site's clamp() gutter, so the rope reaches both edges.\n     ============================================================ -->\n\n<div id=\"cspRopeWalk\" aria-hidden=\"true\">\n  <svg viewBox=\"0 0 1000 56\" preserveAspectRatio=\"none\">\n    <path class=\"csp-rope\" id=\"cspRopePath\" d=\"M0,20 Q500,44 1000,20\"\/>\n    <g class=\"csp-end\" id=\"cspEndL\" transform=\"translate(0,20)\"><circle r=\"2.6\"\/><\/g>\n    <g class=\"csp-end\" id=\"cspEndR\" transform=\"translate(1000,20)\"><circle r=\"2.6\"\/><\/g>\n    <g id=\"cspWalker\">\n      <g class=\"csp-poise\">\n        <g class=\"csp-body\">\n          <g id=\"cspLegF\" transform=\"translate(0,-10) rotate(10)\"><path d=\"M0,0 L1.2,5.4 L1.6,9.7\"\/><\/g>\n          <g id=\"cspLegB\" transform=\"translate(0,-10) rotate(-10)\"><path d=\"M0,0 L-0.5,5.3 L-1.1,9.6\"\/><\/g>\n        <\/g>\n        <g id=\"cspBob\">\n          <path class=\"csp-pole\" id=\"cspPole\" d=\"M-34,-10.5 Q0,-17.5 34,-10.5\"\/>\n          <g class=\"csp-body\">\n            <line x1=\"0\" y1=\"-10\" x2=\"0\" y2=\"-16.4\"\/>\n            <path id=\"cspArms\" d=\"M-0.2,-15.8 L-7,-14.4 M0.2,-15.8 L7,-14.4\"\/>\n          <\/g>\n          <circle class=\"csp-head\" cx=\"0\" cy=\"-20.4\" r=\"3\"\/>\n          <g id=\"cspCap\">\n            <path class=\"csp-caph\" d=\"M-3.1,-21.2 Q0,-23.8 3.1,-21.2\"\/>\n            <g transform=\"translate(-1.7,-22.4)\">\n              <g id=\"cspHornL\"><path class=\"csp-caph\" d=\"M0,0 Q-2.8,-3.4 -5.4,-2\"\/>\n                <circle class=\"csp-bell\" cx=\"-5.7\" cy=\"-1.8\" r=\"0.95\"\/><\/g>\n            <\/g>\n            <g transform=\"translate(1.5,-22.7)\">\n              <g id=\"cspHornR\"><path class=\"csp-caph\" d=\"M0,0 Q1.3,-4.6 4,-3.4\"\/>\n                <circle class=\"csp-bell\" cx=\"4.3\" cy=\"-3.3\" r=\"0.95\"\/><\/g>\n            <\/g>\n          <\/g>\n          <g id=\"cspBalls\" opacity=\"0\">\n            <circle r=\"1.8\" class=\"csp-b1\" cx=\"-3.5\" cy=\"-12.7\"\/>\n            <circle r=\"1.8\" class=\"csp-b2\" cx=\"0\" cy=\"-27\"\/>\n            <circle r=\"1.8\" class=\"csp-b3\" cx=\"3.5\" cy=\"-12.7\"\/>\n          <\/g>\n        <\/g>\n      <\/g>\n    <\/g>\n  <\/svg>\n<\/div>\n\n<style>\n#cspRopeWalk{\n  \/* the kit, locally scoped \u2014 change these four to retheme her *\/\n  --csp-teal:  #6EB4BA;\n  --csp-parch: #D2C2AA;\n  --csp-spark: #FD6B34;\n  --csp-bg:    #1C1C1C;\n\n  position: fixed; left:0; right:0; bottom:0;\n  height:56px; z-index:90;\n  pointer-events:none;\n}\n#cspRopeWalk::before{\n  content:\"\"; position:absolute; inset:-22px 0 0; z-index:-1;\n  background: linear-gradient(to top,\n    var(--csp-bg) 0%,\n    color-mix(in oklab, var(--csp-bg) 86%, transparent) 55%,\n    transparent 100%);\n  backdrop-filter: blur(4px);\n}\n\/* full-width: no max-width cap, no centering \u2014 edge to edge, with a\n   small fixed inset so the rope-end circles aren't flush against the\n   literal screen edge. *\/\n#cspRopeWalk svg{\n  width:100%; height:100%; display:block; overflow:visible;\n  padding:0 clamp(0.5rem, 2vw, 1.5rem);\n  box-sizing:border-box;\n}\n#cspRopeWalk .csp-rope{ stroke:#939498; stroke-width:1.5; fill:none; opacity:.8; }\n#cspRopeWalk .csp-end circle{ fill: var(--csp-teal); }\n#cspRopeWalk .csp-pole{ stroke: var(--csp-parch); stroke-width:1.2; fill:none; stroke-linecap:round; }\n#cspRopeWalk .csp-body path, #cspRopeWalk .csp-body line{\n  stroke: var(--csp-teal); stroke-width:1.4; fill:none;\n  stroke-linecap:round; stroke-linejoin:round;\n}\n#cspRopeWalk .csp-head{ fill: var(--csp-spark); }\n#cspRopeWalk .csp-caph{ stroke: var(--csp-parch); stroke-width:1.2; fill:none; stroke-linecap:round; }\n#cspRopeWalk .csp-bell{ fill: var(--csp-spark); }\n#cspRopeWalk .csp-b1{ fill: var(--csp-teal); }\n#cspRopeWalk .csp-b2{ fill: var(--csp-parch); }\n#cspRopeWalk .csp-b3{ fill: var(--csp-spark); }\n#cspRopeWalk .csp-poise{\n  transform-box: fill-box; transform-origin: 50% 100%;\n  animation: cspPoise 7s ease-in-out infinite;\n}\n@keyframes cspPoise{\n  0%{ transform: rotate(0deg); } 30%{ transform: rotate(2.4deg); }\n  55%{ transform: rotate(-2.8deg); } 70%{ transform: rotate(1.2deg); }\n  85%{ transform: rotate(-1.6deg); } 100%{ transform: rotate(0deg); }\n}\n@media (prefers-reduced-motion: reduce){\n  #cspRopeWalk .csp-poise{ animation:none; }\n}\n<\/style>\n\n<script>\n\/* The equilibrist. Deterministic, dependency-free, boring on purpose. *\/\n(function () {\n  'use strict';\n\n  var root = document.getElementById('cspRopeWalk');\n  if (!root) { return; }\n  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  function $(id){ return document.getElementById(id); }\n\n  var svg = root.querySelector('svg');\n  var rope = $('cspRopePath'), walker = $('cspWalker');\n  var legF = $('cspLegF'), legB = $('cspLegB'), pole = $('cspPole'), bob = $('cspBob');\n  var hornL = $('cspHornL'), hornR = $('cspHornR');\n  var armsEl = $('cspArms'), ballsG = $('cspBalls');\n  var balls = ballsG ? Array.prototype.slice.call(ballsG.querySelectorAll('circle')) : [];\n  if (!rope || !walker) { return; }\n\n  \/* ---------- geometry ---------- *\/\n  var len = rope.getTotalLength(), sx = 1;\n  function measure(){\n    var w = svg.getBoundingClientRect().width;\n    sx = w > 0 ? 1000 \/ w : 1;\n    var eL = $('cspEndL'), eR = $('cspEndR');\n    if (eL) { eL.setAttribute('transform', 'translate(0,20) scale(' + sx.toFixed(4) + ',1)'); }\n    if (eR) { eR.setAttribute('transform', 'translate(1000,20) scale(' + sx.toFixed(4) + ',1)'); }\n  }\n  function renderRope(){\n    var cx = 200 + 600 * lastU;\n    var cy = 20 + 96 * lastU * (1 - lastU) + dyn;\n    rope.setAttribute('d', 'M0,20 Q' + cx.toFixed(1) + ',' + cy.toFixed(2) + ' 1000,20');\n    len = rope.getTotalLength();\n  }\n  function placeWalker(u){\n    var p = rope.getPointAtLength(u * len);\n    var p2 = rope.getPointAtLength(Math.min(1, u + 0.01) * len);\n    var angle = Math.atan2(p2.y - p.y, p2.x - p.x) * 180 \/ Math.PI;\n    walker.setAttribute('transform',\n      'translate(' + p.x + ',' + (p.y - 0.5) + ') rotate(' + angle.toFixed(2) +\n      ') scale(' + sx.toFixed(4) + ',1)');\n  }\n  function progress(){\n    var doc = document.documentElement;\n    var max = doc.scrollHeight - window.innerHeight;\n    return max > 0 ? Math.max(0, Math.min(1, window.scrollY \/ max)) : 0;\n  }\n\n  \/* ---------- the fool's cap: horns on a lagging spring ---------- *\/\n  var capA = 0, capPose = 0, capSpring = 0;\n  function applyCap(){\n    if (!hornL) { return; }\n    var target = Math.max(-38, Math.min(38, capPose + capSpring));\n    capA += (target - capA) * 0.16;\n    hornL.setAttribute('transform', 'rotate(' + capA.toFixed(1) + ')');\n    hornR.setAttribute('transform', 'rotate(' + (capA * 0.7 - 3).toFixed(1) + ')');\n  }\n\n  \/* ---------- the walk cycle ---------- *\/\n  var STRIDE = 18, curSwing = 10;\n  function applyPose(swing){\n    if (!legF) { return; }\n    if (!reduced && ((swing < 0) !== (curSwing < 0)) && Math.abs(swing - curSwing) < 30) {\n      kick(3);   \/* footfall *\/\n    }\n    capPose = (curSwing - swing) * 2.4;\n    curSwing = swing;\n    legF.setAttribute('transform', 'translate(0,-10) rotate(' + swing.toFixed(1) + ')');\n    legB.setAttribute('transform', 'translate(0,-10) rotate(' + (-swing).toFixed(1) + ')');\n    if (jugState === 'none') {\n      pole.setAttribute('transform', 'rotate(' + (-swing * 0.14).toFixed(2) + ')');\n    }\n    bob.setAttribute('transform', 'translate(0,' +\n      (-0.8 * (1 - Math.abs(swing) \/ 24)).toFixed(2) + ')');\n    applyCap();\n  }\n\n  \/* ---------- the rope spring ---------- *\/\n  var dyn = 0, dynV = 0;\n  function kick(v){\n    if (reduced) { return; }\n    dynV = Math.max(-46, Math.min(46, dynV + v));\n  }\n\n  \/* ---------- the intermission: juggling ---------- *\/\n  var ARMS_HOLD = 'M-0.2,-15.8 L-7,-14.4 M0.2,-15.8 L7,-14.4';\n  var ARMS_JUG  = 'M-0.2,-15.8 L-5,-13.4 L-4,-11.9 M0.2,-15.8 L5,-13.4 L4,-11.9';\n  var jugState = 'none', jugStart = 0, jugT0 = 0, armsSwapped = false;\n  var prevP = [0, 0, 0];\n  function ballPos(p){\n    var a = p * Math.PI * 2;\n    var cy = -15.5, rx = 8;\n    var vert = -Math.cos(a);\n    var ry = vert > 0 ? 12 : 6;\n    return [rx * Math.sin(a), cy - vert * ry];\n  }\n  function startJuggle(now){\n    if (reduced || !armsEl || !balls.length) { return; }\n    jugState = 'drop'; jugStart = now; armsSwapped = false;\n  }\n  function stopJuggle(){\n    if (jugState === 'none') { return; }\n    jugState = 'none';\n    ballsG.setAttribute('opacity', '0');\n    armsEl.setAttribute('d', ARMS_HOLD);\n    pole.removeAttribute('transform');\n  }\n  function juggleFrame(now){\n    if (jugState === 'drop') {\n      var k = Math.min(1, (now - jugStart) \/ 550);\n      var e = k * k * (3 - 2 * k);\n      pole.setAttribute('transform', 'translate(' + (-11 * e).toFixed(2) + ',' +\n        (13.4 * e).toFixed(2) + ') rotate(' + (9 * e).toFixed(2) + ')');\n      if (!armsSwapped && k > 0.55) { armsSwapped = true; armsEl.setAttribute('d', ARMS_JUG); }\n      if (k >= 1) {\n        jugState = 'juggling'; jugT0 = now; prevP = [0, 1 \/ 3, 2 \/ 3];\n        ballsG.setAttribute('opacity', '1');\n      }\n      return;\n    }\n    var tt = (now - jugT0) \/ 1000 * 0.55;\n    for (var i = 0; i < 3; i++) {\n      var p = (tt + i \/ 3) % 1;\n      var pos = ballPos(p);\n      balls[i].setAttribute('cx', pos[0].toFixed(2));\n      balls[i].setAttribute('cy', pos[1].toFixed(2));\n      if (prevP[i] > p) { kick(0.9); }\n      prevP[i] = p;\n    }\n    bob.setAttribute('transform', 'translate(0,' +\n      (0.4 * Math.sin(tt * Math.PI * 6)).toFixed(2) + ')');\n    applyCap();\n  }\n\n  \/* ---------- the main loop ---------- *\/\n  var lastU = 0.045, uAtRest = 0.045, dispT = -0.045, prevTs = null;\n  var resting = true, restSince = 0, movedSince = 0, everMoved = false;\n\n  function frame(ts){\n    window.requestAnimationFrame(frame);\n    if (document.hidden) { prevTs = null; return; }\n    if (prevTs === null) { prevTs = ts; }\n    var dt = Math.min(0.05, (ts - prevTs) \/ 1000);\n    prevTs = ts;\n\n    \/* smoothing: she trails the scroll like a walker, not a scrollbar *\/\n    var target = progress();\n    if (reduced) { dispT = target; }\n    else { dispT += (target - dispT) * Math.min(1, dt * 3.4); }\n\n    var u = 0.045 + dispT * 0.94;\n    var moving = Math.abs(u - lastU) > 0.00035;\n\n    if (moving) {\n      movedSince = ts; everMoved = true;\n      stopJuggle();\n      if (resting) {\n        resting = false;\n        kick(22);            \/* push-off *\/\n      }\n    } else if (!resting && ts - movedSince > 420) {\n      resting = true; restSince = ts;\n      if (Math.abs(u - uAtRest) > 0.015) { kick(13); }   \/* landing *\/\n      uAtRest = u;\n    }\n\n    \/* legs: walking, or easing into a stand *\/\n    if (!reduced) {\n      if (moving) {\n        var phase = (u * len \/ STRIDE) * Math.PI;\n        applyPose(24 * Math.sin(phase));\n      } else if (Math.abs(curSwing) > 10.5 || (curSwing !== 10 && curSwing !== -10)) {\n        var st = curSwing >= 0 ? 10 : -10;\n        var d = st - curSwing;\n        if (Math.abs(d) < 0.4) { applyPose(st); }\n        else { applyPose(curSwing + d * 0.14); }\n      }\n    }\n\n    \/* the act, one second after she has settled *\/\n    if (!reduced && resting && everMoved && jugState === 'none' &&\n        ts - restSince > 1000) {\n      startJuggle(ts);\n    }\n    if (jugState !== 'none') { juggleFrame(ts); }\n\n    \/* the spring *\/\n    if (!reduced && (Math.abs(dyn) > 0.02 || Math.abs(dynV) > 0.02)) {\n      dynV += (-88 * dyn - 5 * dynV) * dt;\n      dyn += dynV * dt;\n      capSpring = -dynV * 0.55;\n      applyCap();\n    } else { dyn = 0; dynV = 0; capSpring = 0; }\n\n    lastU = u;\n    renderRope();\n    placeWalker(u);\n  }\n  measure();\n  window.addEventListener('resize', measure, { passive: true });\n  renderRope();\n  placeWalker(0.045 + dispT * 0.94);\n  window.requestAnimationFrame(frame);\n}());\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Papp Cseperke Rendszerek \u00e9s Diz\u00e1jn Information Decision Interactive Adaptive Systems &amp; DESIGN Digital Equilibrist Fool on a Tightrope Structure where it matters. Play just for fun&#8230; I\u2019m Cseperke Papp, mad scientist of typography, visualization, and motion. I take delight in building visualizations and the systems that hold them up, experimenting with the mathematics of rhythm, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-422","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/pages\/422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/comments?post=422"}],"version-history":[{"count":894,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/pages\/422\/revisions"}],"predecessor-version":[{"id":14752,"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/pages\/422\/revisions\/14752"}],"wp:attachment":[{"href":"https:\/\/pappcseperke.hu\/hu\/wp-json\/wp\/v2\/media?parent=422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}